[Drupal 7] How to create a simple Javscript popup without using third party Javascript libraries?

Unnikrishnan | Updated 05 Aug 2016 | 2 min read

We had come across many situations while developing Drupal based websites where we had to create Javascript popups without using third party Javascript libraries. Third party libraries often lead to dependency issues or conflicts with existing Javascript functionalities. If you want to know how to create a simple Javscript popup in your Drupal website without using third party Javascript libraries then continue reading.

Now lets look at a simple method of creating a nice popup dialog using CSS3 and JQuery.

When we are attempting to create a popup using Javascript we need to write a function that will pop out the dialog window when we click on a link or a button

Here is the function

function donpopup(cat) {
  $('div.popup-dialog').hide();
  $('div#popup-dialog-' + cat).show();
  return false;
}

When we click on the link or button on it's click event we will trigger this function
The above function does two things. The first statement in the function hides any popups that have already been opened, the second statement will show the popup for a specific link/button item that has recently been clicked.
Next we need to create a Javascript function for the close button in the popup like the one below.
```
function closepop() {
 $('div.popup-dialog').hide();
}
```

Now we need to create the HTML part of the popup dialog. Checkout the HTML code for the popup shown below

<div style="position: relative;">
  <div id="don-cat-ST" class="don-catpop">
    <div class="popcls"><a onclick="closepop();return false;" href="#">x</a></div>
      <!-- Place the content here. -->
  <div>
</div>

Now we have a popup with the close button.
Next we need to beautify the popup with CSS3.

Use the following CSS code to add a nice border around the popup.

div.popup-dialog {
  display:none;
  background-color: #FFFFFF;
  border: 1px solid #000000;
  border-radius: 4px 4px 4px 4px;
  box-shadow: 3px 3px 3px #AAAAAA;
  left: 25px;
  padding: 10px 15px;
  position: absolute;
  top: 20px;
  width: 300px;
  z-index: 100;
}

Here is the CSS for the close button.

div.popcls{
 float:right;
 display:block;
 overflow:hidden;
}

Thats all there is to it. You can now have a stunning JS popup in your Drupal website without depending on third party libraries

[Drupal 7] How to create a simple Javscript popup without using third party Javascript libraries?

Related Topics