Drupal Technical

How to create a Pop up window using the color box module for Drupal websites

Jibin.jose | | 1 min read

Article will be explaining how to create a Pop up using the colorbox module for our Drupal website. There are certain circumstances were we need to popup blocks to display messages, images, videos etc.
My need was to display a text message on focus out from a particular field inside a content type. Steps are,

Download and enable colorbox module

Download Colorbox

Colorbox module having certain Dependencies. Colorbox plugin 1.x ( Download Colorbox plugin 1.x) and Libraries API 2( Download Libraries API 2) modules.

Enable the Libraries API module

Include the below code inside the custom javascript file,


      $("#id").focusout(function() {
        jQuery.colorbox({html:"<p>"Custom Message.....".</p>
        <div id='id-name'><button type='submit'><img src='/.../images/close.png'>close</button></div>"});
        setTimeout(function(){$.colorbox.close();}, 60000);
        $("#id-name").click(function () {
          $.colorbox.close(); 
        });     
      });

The above lines of code will surely help to create the colorbox pop up. Here focus out from the particular id will create a colorbox pop up. Here we added html tags to add custom message to show inside the color box. Also can add image inside the color box pop by adding img tags.

We also set a time limit to display the colorbox here we set a time limit of 60 sec. If the user don't close the pop up after reading the message will automatically close the pop up window if we set the time.

The above documents worked for me.

 

 

Related Topics