[Drupal 7] How to create a simple Javscript popup without using third party Javascript libraries?
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY unnikrishnan
6 years ago
Javascript
2
comments comment

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.

  1. 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
  2. Here is the function
    function donpopup(cat) {
      $('div.popup-dialog').hide();
      $('div#popup-dialog-' + cat).show();
      return false;
    }
  3. When we click on the link or button on it's click event we will trigger this function
  4. 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.
  5. 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();
    }
  6. 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>
  7. Now we have a popup with the close button.
  8. Next we need to beautify the popup with CSS3.
  9. 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;
    }
  10. 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


RELATED ARTICLE

close

on 10th May 2007 / by webmaster
We were working on an online billing application for a small charity firm when we came upon this problem. The application was developed and tested under Firefox. However we got the error when we tested it on Internet Explorer 6 (6.0.2900.2180). There was a simple window.open javascript call to open a popup window. The window was opening fine but it remained blank and the parent window showed the javascript error Error: Class not registered. The line number was pointing to the line with the window.open code. We tried uninstalling and reinstalling Internet Explorer but to no avail. After some searching we came upon this thread in a forum with the solution to the Class not registered error. http://www.webdeveloper.com/forum/archive/index.php/t-58228.html The solution was simple just re-register the IE dlls using the following commands in a batch file. You could also copy and paste directly into a command prompt to get the same result. regsvr32 c:\windows\system32\urlmon.dll regsvr32 c:\windows\system32\actxprxy.dll regsvr32 c:\windows\system32\shdocvw.dll regsvr32 c:\windows\system32\mshtml.dll regsvr32 c:\windows\system32\browseui.dll regsvr32 c:\windows\system32\jscript.dll regsvr32 c:\windows\system32\vbscript.dll regsvr32 c:\windows\system32\oleaut32.dll Javascript Web Development Leave a reply Your email address will not be published. Required fields are marker * Anonymous (not verified) access_time 25 Mar 2019 - 09:33 Thanks - I was experiencing "Error: Class not registered" errors when trying to open a link in Windows Explorer. I re-registered the dlls as described above. Problem solved. mark (not verified) access_time 25 Mar 2019 - 09:33 i have the same problem regarding class not registered error in internet explorer every time i browse. i've read the solution on how to do but i dont know how the procedure on re-registering the IE dlls using the following commands in a batch file. can you help me on it?thanks a lot.... webmaster access_time 25 Mar 2019 - 09:33 In reply to i have the same problem by mark (not verified) Open notepad. Copy the commands given above to notepad. Save the file as C:\registerdll.bat. Click on start menu &gt;&gt; Run. Type cmd and press enter. In the command prompt window that opens up type C: and press enter. Then type cd \ and press enter. Then type registerdll.bat and you are done :) Anoop John Team Zyxware Jason (not verified) access_time 25 Mar 2019 - 09:33 In reply to Batch file to register dlls by webmaster I did the stpes that were given, everything looked to go okay but then it said DLLRegisterServer entry point not found for c:/windows/system32/mshtml.dll..... So it didnt not fix the issue that I can tell. Any help?? Thanks in advance!!! Anonymous (not verified) access_time 25 Mar 2019 - 09:33 Same problem, the solution worked well. Nice SEO for the article too. Add new comment
more_horiz
close

on 05th June 2012 / by muhammed.fathima
We were trying to create a new theme for our Drupal site and we came across an issue. How to create div "left" to be the same height as div "right" which can be smaller or bigger? Is it possible to have the "left" div height adjusts automatically according to the "right" div height? Here is what saved us: Retrieve the height of one div '.style_right_side_content' and apply it to another div ('.style_left_side_content')'s min-height. Use the following JQuery code: var divHeight = $('.style_right_side_content').height(); $('.style_left_side_content').css('min-height', divHeight+'px'); Javascript Drupal CSS JQuery Leave a reply Your email address will not be published. Required fields are marker * Anonymous (not verified) access_time 25 Mar 2019 - 09:33 Thank you! very helpfull. Jon (not verified) access_time 25 Mar 2019 - 09:33 This ones solved my problem :) Add new comment
close

on 26th June 2012 / by jiby.john
Have you ever wondered how that cool site you saw last day had those cool interfaces and you wished your Drupal site could have the same coolness? jQueryUI is your saviour here. jQueryUI is one of the most popular JavaScript libraries out there in the world of web development. jQueryUI allows you to add very cool user interface elements to your website without much effort. Just follow these steps to get jQueryUI working at your command: 1. Download the drupal module for jqueryUI from: http://drupal.org/project/jquery_ui and extract the files to sites/all/modules directory. 2. Download the jQuery UI 1.6 release from: http://code.google.com/p/jquery-ui/downloads/list?q=1.6 3. Extract the files and place it in /sites/all/libraries/jquery.ui/ so that the actual jQuery UI JavaScript files are located in: /sites/all/libraries/jquery.ui/ui/*.js 4.Enable your module at Administer &gt; Site building &gt; Modules. 5.To use jquery ui in your module you need to call the function: jquery_ui_add($files); like, jquery_ui_add(array('ui.dialog', 'ui.droppable', 'ui.sortable')); when you call the above function, the corresponding js file will be loaded to that module. If everything goes well,you can create a dialog box jquery_ui_add('ui.dialog'); &lt;script&gt; $(document).ready(function() { $('.message').dialog(); }); &lt;/script&gt; &lt;div classs="message"t&gt;Hello&lt;/div&gt; Run that, and bask in the glory of your newly found jQuery expertise! Happy coding!. Javascript Web Development Drupal JQuery Leave a reply Your email address will not be published. Required fields are marker *
Leave a reply
Your email address will not be published. Required fields are marker *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

author-image
Anonymous (not verified)
access_time 25 Mar 2019 - 13:51

This looks like a valid solution, but important details are missing. For example:

- Where do you put the HTML (in a file?)
- How do you launch the popup (in onclick()?)

Thanks


author-image
Anonymous (not verified)
access_time 25 Mar 2019 - 13:51

I am new drupal. It is very helpful but I don't know where I will put this code. How I will use this code