[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
7 years ago
Drupal-Technical
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

/themes/custom/zyxpro_light/images/placeholder.png
close

on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 15 Aug 2020 - 10:11 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 15 Aug 2020 - 10:11 In reply to Icon doesn&#039;t show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 15 Aug 2020 - 10:11 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 15 Aug 2020 - 10:11 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 15 Aug 2020 - 10:11 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 15 Aug 2020 - 10:11 This is definitely a good guide. Thanks for this. wellyson access_time 15 Aug 2020 - 10:11 This is really nice and helpful. Add new comment
/themes/custom/zyxpro_light/images/placeholder.png
close

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Leave a reply Your email address will not be published. Required fields are marked * Shlomi Fish (not verified) access_time 15 Aug 2020 - 10:11 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 15 Aug 2020 - 10:11 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 15 Aug 2020 - 10:11 Hello! Nice Article very interesting, thanks Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

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 15 Aug 2020 - 16:52

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 15 Aug 2020 - 16:52

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