Dev Notes

Software Development Resources by David Egan.

Bootstrap Modals


Bootstrap, CSS, WordPress
David Egan

#Bootstrap Modals Modals enable user triggered hide and display of additional HTML content.

To set up a pure HTML Bootstrap 3 Modal triggered by a link, use the following markup

<a href="javascript:;" data-toggle="modal" data-target="#myModal">More Info...</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
     <h4 class="modal-title" id="myModalLabel"><?php echo $name; ?></h4>
    </div>
  <div class="modal-body">
   <p>Some HTML content</p>
  </div>
  <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div>
 </div>
</div>

WordPress

It’s pretty easy to wire up modals within WordPress.

This function takes custom field data and uses it to build a modal:

/*==============================================================================
  Biographical Repeater
  ============================================================================*/

function carawebs_biographical_repeater () {
  $repeater = "people";

  if(get_field($repeater)){

    $i = 1;

    while(has_sub_field( $repeater )):

      $name = get_sub_field('name');
      $text = get_sub_field('biographical_info');
      $modal_text = get_sub_field('modal_text');
      $link = get_sub_field('linked_in');
      $image = get_sub_field('person_image');

      // In ACF, set image to return an image object
      // Image variables
      //$url = $image['url'];
      $title = $image['title'];
      $alt = $image['alt'];
      $caption = $image['caption'];

      // thumbnail
      $size = 'medium';
      $thumb = $image['sizes'][ $size ]; // Returns the URL of the correct size
      $width = $image['sizes'][ $size . '-width' ];
      $height = $image['sizes'][ $size . '-height' ];

      // The Output
      ?>
      <div class="col-sm-4 col-sm-offset-1">
         <img class="img-responsive" <?php if ($title) echo 'title="' . $title . '"'; ?> src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" /><br>
         <h4><?php echo $name; ?></h4><br>
         <div class="post-excerpt"><?php echo $text; ?></div>
          <!-- Modal trigger - the target is built using a counter, $i -->
          <a href="javascript:;" data-toggle="modal" data-target="#myModal-<?php echo $i; ?>">More Info about <?php echo $name; ?></a>
          <!-- Modal Code Begins -->
          <div class="modal fade" id="myModal-<?php echo $i; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
             <div class="modal-dialog">
              <div class="modal-content">
                 <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title" id="myModalLabel"><?php echo $name; ?></h4>
                 </div>
                 <div class="modal-body">
                  <?php echo $modal_text; ?>
                 </div>
                 <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  <button type="button" class="btn btn-primary">Save changes</button>
                 </div>
              </div>
             </div>
          </div>
          <!-- Modal end -->
          <a href="<?php echo $link; ?>" class="linked-in"><?php echo $name; ?>'s Linked In Profile</a><br>
      </div>
      <?php

    $i++;

    endwhile;

    ?></div><?php

		}

}

Body Jump in Chrome

I’m not sure if this occurs because of a fixed navbar, but the Bootstrap JS adds padding-right to the body element when the modal-open class is added:

<body class="page page-id-18 logged-in admin-bar about customize-support modal-open" style="padding-right: 15px;">

This can be corrected with:

// Prevent Modal Jumping
// -------------------------

body.modal-open {
  padding-right: 0!important;
}
comments powered by Disqus