Trigger Bootstrap Modal with Link

Triggering the Bootstrap Modal Window with a link is surprisingly easy. In our case we are using the excellent Pagelines DMS WordPress Framework which has the modal capability built in. Whatever you are using we assume that you have the necessary Bootstrap files integrated into your site or WordPress theme.

It’s a simple 2 step process

  1. Add the Modal HTML Markup to your site
  2. Add the link trigger

1. Adding the Modal Window code (as below) to your current HTML can easily be achieved by ‘abc’ options

      <!-- Modal -->
  <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" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
         Your Modal Content Here
        </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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Options for Embedding Modal Markup

a. Simply cut and paste into your Body Content (as you have the code already in place the CSS classes will hide the Modal HTML Markup until it’s triggered. We recommend a ‘relative’ div as the container and preferably in the header or footer if you wish the Modal to show on every page. if you are using Pagelines DMS then you could use a Textbox or PL NextBox section to incorporate your code anywhere on your page.
b. Add a custom shortcode via the excellent ShortCodes UI WordPress plugin (this would be an ‘Advanced ShortCode if you also wanted to include PHP in your Modal’). Again with Pagelines DMS then you could execute the code in PL NextBox.
c. Add a function to your functions.php as below (please note that this would cause some head Bloat)

Write the HTML to our WordPress site header (so it works on every page) via a function in functions.php:-

<?php
add_action('wp_head', 'modal_wp_head');
function modal_wp_head(){
    //Close PHP tags
    ?>
      <!-- Modal -->
  <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" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
         Your Modal Content Here
        </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><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
    <?php //Open PHP tags
}
?>

Add your Modal Content where it shows “Your Modal Content Here” and customise your HTML and CSS as necessary.

The Link Trigger

2. Then all you need to do is add the link that triggers the window:-

<!-- Button trigger modal -->
  <a data-toggle="modal" href="#myModal" class="button">Launch myModal Window</a>

You can also trigger a Bootstrap Modal window with jQuery

<script>
 jQuery(document).ready(function($){
$(".any-div").click(function() {
 $("#myModal").modal();
});
 });
</script>

The code above is in jQuery No Conflict Mode for use with WordPress

About the Author
Trigger Bootstrap Modal with Link Trigger Bootstrap Modal with Link 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.