Drupal Technical

[Drupal] How to invoke bootstrap popup in selected pages using JS in Drupal?

Deepak.r | | 2 min read

While working on a Drupal website recently, I wanted to add a pop-up in some of the selected pages in a website with a delay of 15 seconds after page load. For all users, pop-up should be displayed only once in a day.

We had decided to go with bootstrap pop-up to make it responsive. In fact, at that time, I was only aware of using bootstrap pop-up by proper naming of classes for the html elements. However, our requirement was to display the pop-up with a delay of 15 seconds. Hence, we decided to invoke the pop-up in JavaScript.

I have found some JS functions to trigger/manage bootstrap pop-up.

$('#myModal').modal('show')
$('#myModal').modal('hide')

Using these functions, I have easily implemented a popup by creating a system block with pop-up content and assigned it to a region using context. Hide the block by default and invoke using the following code snippet.

<script type="text/javascript">
    function setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+d.toUTCString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }

    function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') c = c.substring(1);
          if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
      }
      return "";
    }

    (function ($) {
      var test_popup = getCookie("test_popup");
      if (test_popup == "") {
        setTimeout(function(){
          $('#test-popup').modal('show');
        }, 15000);
        setCookie("test_popup", 'shown', 1);
      }
    }(jQuery));
  </script>

  <div class="modal fade test-popup" id="test-popup" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="container">
      <div class="row">
        <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Title for Popup</h4>
              </div>
              <div class="modal-body">
                <div class="test-image">
                   <a href="/test?source=popup"><img src="/images/popup.jpg"/></a>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Hope this helps.

Get more information about other resolved issues and further details related to bootstrap over here. ( Also articles related to bootstrap v3 )

Find out more about the Drupal services that we offer. Get in touch with us for more help.

 

 

Related Topics