Trigger Bootstrap Modal with Link

Glenn Glenn's Blog 6 Comments

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">×</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]
<?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
}
?>
[/php]

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:-


&lt;!-- Button trigger modal --&gt;
  &lt;a data-toggle=&quot;modal&quot; href=&quot;#myModal&quot; class=&quot;button&quot;&gt;Launch myModal Window&lt;/a&gt;

You can also trigger a Bootstrap Modal window with jQuery


&lt;script&gt;
 jQuery(document).ready(function($){
$(&quot;.any-div&quot;).click(function() {
 $(&quot;#myModal&quot;).modal();
});
 });
&lt;/script&gt;

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 WordPress Web Developer, Front-end and 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.

Comments 6

  1. Thank you for this post
    I have a question about another topic, i’m developing a web site using WordPress, and i have sessions to manage, my question is “How to manage sessions in WordPress?! Is it like in PHP ($session_start and those stuff) ?”

    Best regards.

    1. Post
      Author

      Hi Hamza
      That’s off-topic, but in response to your question:-
      “The WordPress platform is totally stateless and provides no native support for the use of sessions outside of the cookie that keeps a user logged in”
      If for some reason you feel you must use Cookies then the simplest way to get access to the session is to add the following lines to wp-config.php before the call to wp-settings:
      [code]
      if (!session_id())
      session_start();
      [/code]
      There is also a the WordPress Native PHP Sessions Plugin that can handle PHP sessions in WordPress.

  2. Hey great article!
    I did everything in this article and I seem to be getting this error:

    Warning: Cannot modify header information – headers already sent by (output started at /Applications/Sites/localwp.com/wp-content/themes/bootstrap-to-wp/functions.php:64) in /Applications/Sites/localwp.com/wp-includes/pluggable.php on line 1171

    I tried playing around with where I placed the add_action but I seem to be getting no such luck. I tried removing the wp_head from the header and that didn’t work, I tried rename the function and that didn’t work. I also went into the pluggable.php file and looked around but none of that made any sense. If you can help me find a solution to this, that would be awesome. Thanks

  3. Post
    Author

    Don’t remove wp_head from the function and certainly not your theme as it will need that. Seems you are have a conflict or your theme is already calling a modal function.. Make sure there are no spaces at the end of your functions.php file and also ensure you are correctly opening and closing the php code throughout that file. Have you tried calling the bootstrap modal just with the link /jquery?

  4. Very nice article. I also want to put a modal on a html page. I mean without wordpress ans as it turns out, we have a php function add_action(), which will probably display an error. How will go about that? will have to write my own function?

    1. Post
      Author

      Hi
      That depends on which Modal you are using, but I’m guessing Bootstrap Modal (as that’s what the article is about). The Javascript Trigger should be as easy as:-
      [code]
      $("#myModal").modal()
      [/code]
      Here is a full example:-
      [code]
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script&gt;
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script&gt;
      </head>
      <body>

      <div class="container">
      <h2>Activate Modal with JavaScript</h2>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
      <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </div>

      </div>
      </div>

      </div>

      <script>
      $(document).ready(function(){
      $("#myBtn").click(function(){
      $("#myModal").modal();
      });
      });
      </script>

      </body>
      </html>
      [/code]

      I should note that you don’t necessarily need to trigger with Javascript:-

      [code]
      <!-- Buttons -->
      <button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <!-- Links -->
      <a data-toggle="modal" href="#myModal">Open Modal</a>

      <!-- Other elements -->
      <p data-toggle="modal" data-target="#myModal">Open Modal</p>
      [/code]

Leave a Reply

Your email address will not be published. Required fields are marked *