← Snippets - Script

Hide Button if Associated Modal is Empty

This is often used in combination with comparison cards, so that if the modal is left empty, the “more details” button on that card will hide and the client doesn’t have to worry about linking/unlinking the modal themselves.

When it’s hard-coded, you can also add sr-only text to allow the visual text to say something like “More Details”, and then specify within the screenreader.

How To

HTML

Example Button

This can have static/hard-coded text or content.

<div class="modal-toggle" data-toggle="modal" data-target="#modal1">More Details</div>

Example Modal

{% raw %}

<div class="card-modals">
  <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-title text-center">
          <div data-content-block="modal1head" data-content="content" data-editable="editable" class="content">
            {{#page.modal1head}}
                {{& content}}
              {{/page.modal1head}}
              <!-- @if NODE_ENV!='production' -->
                  <p><span class="biggest">Account Name</span></p>
                  <p>This is the standard body copy size and weight. You can bold, italicize, underline and align left, centered, or right. Lorem ipsum dolor sit amet.</p>
              <!-- @endif -->
          </div>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="icon icon-close" aria-hidden="true"></span><span class="sr-only">Close Modal</span></button>
        </div>
        <div class="modal-body">
          <div data-content-block="modal1body1" data-content="content" data-editable="editable" class="content remove-blank">
            {{#page.modal1body1}}
                {{& content}}
              {{/page.modal1body1}}
              <!-- @if NODE_ENV!='production' -->
                  
              <!-- @endif -->
          </div>
          <div class="row">
            <div class="col-sm-6">
              <div data-content-block="modal1body2" data-content="content" data-editable="editable" class="content">
                {{#page.modal1body2}}
                    {{& content}}
                  {{/page.modal1body2}}
                  <!-- @if NODE_ENV!='production' -->
                      <ul>
                        <li>bulleted list one</li>
                      </ul>
                  <!-- @endif -->
              </div>
            </div>
            <div class="col-sm-6">
              <div data-content-block="modal1body3" data-content="content" data-editable="editable" class="content">
                {{#page.modal1body3}}
                    {{& content}}
                  {{/page.modal1body3}}
                  <!-- @if NODE_ENV!='production' -->
                      <ul>
                          <li>two</li>
                          <li>two again</li>
                          <li>two three</li>
                          <li>two four</li>
                      </ul>
                  <!-- @endif -->
              </div>
            </div>
          </div>
          <div data-content-block="modal1body4" data-content="content" data-editable="editable" class="content remove-blank">
            {{#page.modal1body4}}
                {{& content}}
              {{/page.modal1body4}}
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- add as many as you need -->
</div>

{% endraw %}

Script

This script finds out if each modal has a title within the title area. If there is no title, the modal and its associated trigger are both removed.

// Must have a modal title (for ADA label/scan-clear reasons) for the modal to show up
$(".modal .modal-title .content").each(function() {
  if (window.self !== window.top || $.trim($(this).text()) || $(this).has("img").length || $(this).has("iframe").length) {
    //do nothing--has text in title, so it's safe
  } else {
    var modalID = $(this).closest('.modal').attr('id');
    $('.check-column .check-column-inner-footer [data-target="#' + modalID + '"]').each(function() {
      if (window.self !== window.top) {
        // do nothing in the editor
      } else {
        // remove the toggle area, even if it has text, because the associated modal is empty
        $(this).closest('.check-column-inner-footer').remove();
      }
    });
    $(this).closest(".modal").remove();
  }
});

Example Sites

Tags: bs3, bs4, modal, html, mustache, script, js, javascript, jquery