Editable Modal Trigger

Sometimes the design will call for a “team member” page where the name of the team member is clickable to open a modal. The “old” way to do this was to include the href/modal trigger inside of the content area, but it also guaranteed that the client would mess it up/break it at least one time. This new setup completely circumvents that to allow them to edit the text for the trigger without adding it themselves.

Bootstrap 5

scripts.js

Place this within the if(inCms) section of the DOMContentLoaded function (Scripts when the DOM is fully propagated). This will add an extra div in that takes the modal target from the button.

// add extra modal toggles within CMS
    let modalToggles = document.querySelectorAll('.team-modal-toggle');
    for(let m = 0; m < modalToggles.length; m++) {
      let modalTarget = modalToggles[m].getAttribute('data-bs-target');
      let extraModalToggle = document.createElement('div');
      extraModalToggle.innerHTML = `<div class="cms-only-toggle" data-bs-toggle="modal" data-bs-target="${DOMPurify.sanitize(modalTarget)}">Edit Pop-up Modal</div>`;
      modalToggles[m].parentElement.append(extraModalToggle);
      modalToggles[m].dataset.bsToggle = "null";
    }

CSS

You may want to go into the cms.scss file and add styling for the .cms-only-toggle piece. If you do this, make sure to also go into the Purge CSS Safelist section of your gulpfile.js and whitelist that class.

HTML

This is an example “team member” block of code. It includes the modal trigger placement and recommended content area setup. If using, make sure to update each repeated instance to have unique content area names, and make sure that it’s connecting to the correct modal.

<div class="team-members__person">
  <div data-content-block="team1" data-content="content" data-editable="editable" class="content">
      {{#page.team1}}
        {{& content}}
      {{/page.team1}}
      {{#dev_environment}}
        <div><img src="https://dummyimage.com/275x225" alt=""></div>
        <div><p class="big"><strong>Jon Q. Public</strong></p><p class="big">Executive Vice President, Regional President</p></div>
      {{/dev_environment}}
  </div>	
  <div data-content-block="team1btn" data-content="content" data-editable="editable" data-bs-toggle="modal" data-bs-target="#teamModal1" class="btn btn-primary team-modal-toggle">
    {{#page.team1btn}}
      {{& content}}
    {{/page.team1btn}}
    {{#dev_environment}}
      <div>See more about Jon</div>
    {{/dev_environment}}
  </div>
      {{! With script in CMS, "edit information" div will be inserted here, so that the modal doesn't pop up whenever they click in the content area to edit.}}
</div>

Example Sites

Farmers State Bank 2023 Remake

Bootstrap 2-4

scripts.js

This first piece of script is placed within the top != self section of the window load function, so that it ONLY runs within the CMS, not on the published page. It first disables the modal trigger on the content area itself, and adds a separate piece of text to allow the trigger of the modal. This prevents the modal from opening whenever the client clicks into the content area to edit the text.

$('.team-member__modalToggle').each(function() {
  var modalToggle = $(this).find('.content').attr('data-target');
  $(this).append('<div data-toggle="modal" class="cms-only-toggle" data-target="' + modalToggle + '">Edit Information</div>');
  $(this).find('.content').attr('data-toggle','');
});

cms.scss

This is the styling for the toggle text that appears only within the CMS.

.cms-only-toggle {
  	text-decoration: underline;
  	cursor: pointer;
  	@include hover-focus {
  		text-decoration: none;
  	}
}

HTML

<div class="team-member">
  <div class="team-member__modalToggle">
    <div data-content-block="teamMember1ModalToggle" data-content="content" data-editable="editable" class="content" data-toggle="modal" data-target="#modal1">
      {{#page.teamMember1ModalToggle}}
          {{& content}}
        {{/page.teamMember1ModalToggle}}
        <!-- @if NODE_ENV!='production' -->
            Name Here
        <!-- @endif -->
    </div>
    {{! With script in CMS, "edit information" div will be inserted here, so that the modal doesn't pop up whenever they click in the content area to edit.}}
  </div>
  <div class="team-member__position">
    <div data-content-block="teamMember1Position" data-content="content" data-editable="editable" class="content">
      {{#page.teamMember1Position}}
          {{& content}}
        {{/page.teamMember1Position}}
        <!-- @if NODE_ENV!='production' -->
            <p>Position <br>Or Extra Details Here</p>
        <!-- @endif -->
    </div>
  </div>  
</div>

Example Sites

High Plains Bank

Tags: bs3, bs4, script, html, mustache, js, scss, sass, modals