Design a site like this with WordPress.com
Get started

Yannick's Corner

WordPress Plugins, Plugin Development Cookbook and random thoughts

Modal Dialog


Create simple pop-up dialogs

This plugin allows users to add a pop-up dialog to their site on all pages or specific pages, that can appear once or multiple times. The dialog can contain content defined in the admin pages or content from an external web address.

You should normally see an example of the plugin’s capabilities while viewing this page.

Donations

If you feel generous and really like this plugin, here is a donation link on Paypal. You can edit the amount before proceeding with the donation.

PayPal-Donate-Button-PNG-HD

423 thoughts on “Modal Dialog”

Add Comment

  1. Hi Yannick,

    Thank you for this great plugin, it kind of saved my ass :). I am using this link as you have suggested to open the modal onClick:

    TEST
    function openDialog() { jQuery(“a#inline”).trigger(‘click’) }

    This is in the footer, on every page, however, I would like to use another Modal window I have created and I don’t know how to open/target that specific second modal window using, again, a link to it. Any thoughts please?

    Like

    1. Hi Chris, You can only define one dialog per page. It is not possible to define multiple different dialogs to appear on a page.

      Like

  2. Hi Yannick,

    Im attempting to use your plugin (I think the idea is great, i hope i can get it to work!) with an App Themes theme called Job Roller that already uses jquery, so I think that’s where my problem is. The Modal Dialog doesn’t appear to load at all? So i’m wondering if you’d be able to help me out and confirm whether or not this is the problem or not?

    Kind Regards,

    Martyn
    (www.workinreading.co.uk)

    Like

  4. First off… thanks for all of your hard work. I think Modal Dialog is a great plugin, but I am completely baffled as to why it is not working on a website I am helping a friend out with. The website is: http://coachnextgen.com/

    I’m using WP 3.4, I have Modal Dialog 2.3.6 installed, and the only jquery “conflict “I see is in wp-includes. I am using AWeber code, And my theme is PureVision, and I have & in the header and footer.php… and I checked for fancybox conflicts… but I didn’t see any.

    My Modal Dialog Configuration settings are:

    Number of times to display modal dialog 100
    Period to display dialog (every # page loads) 1000
    Auto-Size Dialog (Checked)
    Hide Scroll Bars (Checked)
    Display on front page (Checked)

    Any suggestions as how to get this to work would be greatly, greatly, greatly appreciated.

    Thanks again.

    All the best,
    Kevin

    Like

    1. Hi Kevin, change the `Period to display dialog (every # page loads) from 1000 to 1. The way it is currently, the modal dialog will only appear after you refresh the page 1000 times.

      Like

      1. You are awesome, and such a good guy to take the time to support your plugins. I made the change and it works fantastic. Veronica is very happy and says THANK YOU!

        Like

  5. Trying to use your plugin, like the idea for opt in code for AWeber, i am unable to get the pop up to activate for some reason. Am i missing something? Also, does the plugin work in IE as well.

    I have tried some others and not only no support, but will not work in IE. Thanks.

    Like

    1. Hi Brent, The reason it is not showing up is because your theme is loading up it’s own copy of jQuery, instead of making a request to WordPress to load a copy, which would get consolidated with other requests. Edit your theme’s header.php and remove the line that loads jQuery and you should see the dialog load. One user reported an issue with IE9 that I still need to look into. Actually, perhaps you could see and confirm if it works correctly on your site in IE9 once you get it to display.

      Like

  6. I am having a difficult time getting this plugin to work on my site. I’ve looked to see if its due to the jquery issue that you solved above and that doesn’t seem to be the case. I thought that maybe it was me not getting the settings right, but a co-worker and I went through them and they all seem to be correct. Could it be something with my sites template?

    Help I am at a loss and I really want to use this feature on my site. http://www.thefallschurchpost.com

    Steve

    Like

    1. Hi Steve, the problem is that you have empty values for the dialog width and height in the configuration, and the plugin does not have any default values if you make these fields blank. Please try setting values for these parameters and the dialog should come up.

      Like

      1. Ok, so I put in 620×450 and I still can’t get it to show up, is there something else I am missing?

        Can i attach or send a screen shot of the config page to you?

        Thank you for your help

        Steve

        Like

  7. Yannick,

    Great plugin; it’s exactly the sort of functionality I’m looking for. I am experiencing something I could use your guidance on though. If you visit my site (http://www.hollyroths.com) you’ll see my implementation of your plugin. I’m attempting to load a page from my wordpress site itself in the modal. The problem is that even with the “number of times to display” and “period to display” both set to 1 in the configuration, when the page loads for the first time the dialog pops up and then loads a second dialog within the original dialog.

    The content I want to load in the dialog includes short code from other plugins on my WP page, so creating a separate html page in the directory to load doesn’t really work because the dialog doesn’t load all of the proper includes, calls, libraries etc. Now I could do an really long work around by setting up a second WP site to call from, but my guess is there’s an easier way … and the answer may even lay deep within the infinite knowledge of your brain!

    Thanks Early!

    Justin

    Like

  8. Yannick,

    Can you tell me if there’s a way to load a page from my own WP within the Modal Window without it loading the Modal a second time. If you visit my website (shown above) you’ll see what I mean.

    Justin

    Like

    1. Hi Justin, there was no way to exclude a specific page from having a pop-up dialog displayed. However, I just added this capability in the latest update. Please try it out.

      Like

      1. Brilliant!

        I upgraded the plugin, filled in the new configuration field, opened a fresh browser session and the results were exactly what I hoped for & needed.

        Thanks for the fast response & efforts!

        Like

  9. Installed the plug in. It works like a charm except for two things:
    1: I figured out how to set it to only show on one page, However once its on te page and a person clicks on something on the modelbox, how do I get it not show again?

    2: Can I use shortcodes or direct codes within the box? And if so how can I do it? I want to use a gravity form in the box but I can’t seem to get it to connect the data with the gravity plug in.

    Like

    1. Hi Bobby,

      1. Did you check the “Set display cookies manually” option perhaps? If not, could you send me a screenshot of your configuration page so I could see if anything is not set correctly.

      2. Yes, you can use shortcodes in the box. That being said, some plugins, like Contact Form 7, have been acting up lately with the do_shortcode function that Modal Dialog is using. If possible, try removing the double-quotes around the arguments that you are sending to the shortcode. For example, instead of dialog=”1″, only write dialog=1. This resolved the problems with Contact Form 7.

      Like

  10. Hi Yannick,
    I am fall in love with your amazing plugin.
    It is working very well on my english blog http://www.automotivespace.eu.
    Yesterday I decide to active it also on http://www.automotivespace.it.
    The setting, and the plugin installed, are the same, but it’s not work in anyway.
    Can I send to you screenshot of configuration page?
    I’m crazing for this…I don’t find any reason for this different feedback of your plugin.

    Can you help me?
    Many Thanks

    Like

    1. Sure. You can send me a screenshot through the contact form at the top-right of my site. The first thing is that I made a recent change to the plugin where you need to check the Show on Front Page box for the dialog to show up on the front page.

      Like

      1. Dear Yannick,
        before to send you a screenshot I made a check…:(

        You must know that this summer is very hot in Italy …One of the hottest summer in the last 100 years!!!…and so I waste two days without to check the Show on Front Page box!!!

        Sorry…now is all ok!

        Like

  11. Dear Yannick,

    Thanks for your plugin, it has made my job a lot easier.

    However I have just updated the plugin and I am having a bit of trouble keeping the previous settings I had chosen with the version before.

    I now have the pop up embedded on the footer of every page on my website and changing the options to stop this is ineffective.

    Hope you can help.

    Regards,

    Will

    Like

    1. Hi Will, Can you try upgrading to the latest Modal dialog version and seeing if the problem is resolved? I cleaned up the code to determine what dialog should be displayed. Also, do you have the plugin configuration to display multiple different dialogs?

      Like

  12. Hi Yannick,
    we’ve correctly installed your wonderful plugin on our website but…………….. nothing happen 😦
    No modal windows, no error … can you see the light in this case? 🙂
    Thank you in advance for your time

    Like

    1. Hi Max, There seems to be a problem with your WordPress installation. Using the Firebug extension for Firebug, one of the first errors I get says that it cannot load http://www.total-photoshop.com/wp-includes/js/jquery/jquery.js?ver=1.7.2. This script is supposed to be in WordPress installations. Check why it’s not there (the actual file name is jquery.js).

      Then, your theme tries to load its own version of jQuery with the following code: . This is bad. Find and remove that code from your theme’s header.

      Once you’ve done these corrections, let me know if Modal Dialog still does not show up.

      Like

  13. Hi Yannik,

    Thanks for the wonderful plugin. I am just trying to get the plugin working with my temp website http://www.mlmfreak.com/dev/. I pasted the code from wordpress social login here and its working fine. But upon registration confirmation, I would like users to be taken in to another popup page where they would update their emails, other details etc. A similiar implimentation I could see in http://www.mosaichub.com/.

    Also can I enable the popup with the click of a button or link ?

    Thanks in Advance.

    Like

    1. Hi Diana, How does WordPress social login work? Does it let you specify the address of a page that users will be returned to after connecting with their credentials? If so, you could create a second pop-up with the plugin, then associate that pop-up to another page.

      Yes, it’s possible to activate the popup by clicking on a link, by calling the following code onclick:

      function openDialog() { jQuery(“a#inline”).trigger(‘click’) }

      Like

  14. Hi Yannick, your plugin is definitely one of the best in the WordPress directory (honest)!! I have a little issue though… I installed the plugin on my computer’s localhost to create a custom form to appear in the dialog, and everything worked fine.

    Now I’m trying to get the Modal Dialog to work on my true website but nothing is working at all 😦

    What could be wrong? I’ve made the exact settings as in my localhost but it’s still not working…

    Any help for me?

    Thanks!! 🙂

    Like

    1. Hi Isaac, I am guessing that you were using a different theme and/or different on your local development than on your production server. Looking at your site, I am seeing a few problems:

      – Your theme is loading an old version of the jQuery library from the Google API site
      – Modal Dialog is conflicting with the Cool Video Library plugin that you have installed on your site.

      First try to remove the jQuery problem, then see if things get better. If not, let me know.

      Like

      1. Hi Yannick, this is it! It was the Cool Video Plugin which was conflicting! I’ve still updated my jquery link in my header for precautions though… Thanks!
        ps: I’ve sent you a private message through your Contact Me page 🙂

        Like

  15. Pingback: My Top 10 Must Have FREE Plugins for Any Wordpress Blog — Tips on Social Media from FunCitySocialMedia!

  16. i have super popup installed on my client’s website and it is missing a feature to not appear if a user registers. I think their paid version has it. Do you have a free version that will accomplish this?

    Like

    1. Hi Laine, That feature is available in Modal Dialog and the plugin only has a free version. It is called ‘Do not show if user logged in’. Modal Dialog is donation-supported.

      Like

  18. Hi – I tried to use your great plugin on my site and it gives the following script error in firefox: jQuery(“a#inline”).fancybox is not a function.
    Its obviously a conflict but where? Please help..

    Like

    1. Hi Rodney, I see that the plugin is partly active on your site, but I am not seeing the fancybox javascript error and am not seeing the code that should try to actually display the dialog. Could you re-enable it so that I could try to debug the issue.

      Like

  19. Hi Yannick,
    Your plugin is great! However, I am having one issue. Whenever I exit out of it, I get an error 404 because “undefined” gets tacked on to the end of the url. Is there something I’m missing in the configurations and can you help me?
    Thank you!
    Diana

    Like

    1. Hi Diana, Could you send me a link to the page where you are trying to use Modal Dialog? And what you say “exit out of it”, are you referring to when you close the dialog? I am not sure where this “undefined” comes from. I am not generating this as far as I know.

      Like

      2. Hi Diana,

        I just tried looking at the popup but it is not currently working due to a javascript error on the rest of your page. Please correct and let me know when it comes up again.

        Like

  20. I have set the dialog box up and it works great, however, It shows up on all pages and I only want it to show up on a specific page (products). I have changed this option in the configuration, but to no avail. Please advise.

    Like

    1. I figured it out. My problem was that I was not entering numerical page IDs. I had set my pages up with permalinks, so I had a hard time finding the numeric Id. All is well.

      Like

      1. Hi Tim. I am glad to hear that you figured it out quickly. Enjoy the plugin and consider supporting its development!

        Like

  21. Hello Yannick,
    I used your plugin since many months. It always worked very well, but since yesterday it doesn’t appear anymore. I tried to uninstall but it didn’t change nothing : the box doesn’t appear. I really don’t understand from where come the problem…
    Thank you in advance for your help.

    Regards,
    Anthonin

    Like

    1. Hi Anthonin, Did you recently upgrade Modal Dialog? A change that was introduced a few versions back is that you now need to specifically say if you want Modal Dialog to show up on the front page in the options page. Can you try to set that option and see if the dialog comes back?

      Like

      1. Hi Yannick and thank you for your answer.
        Unfortunnately no, i did not update Modal Dialog. When i uninstall it and reinstall, i had the new version, and i see the option to show on the front page and i check it. So i think the problem doesn’t come from here.
        Sorry for my bad english, i am french !

        Regards,
        Anthonin

        Like

  22. Hi Yannick,

    Great plugin! We’ve just about got it working perfectly for us, with one issue. We’re trying to get it firing from an onClick event in addition to the normal modal display.

    I’m using the following code for the link:
    [a onClick=”openDialog();” href=”#” title=”Email”]Email[/a]

    Along with this JS in the footer:

    function openDialog() {
    alert(‘in openDialog’);
    $(‘a#inline’).trigger(‘click’);
    }

    The onClick fires and displays the alert, but the modal window never shows.

    I’ve tried it with and with the “Set display cookies manually” checked in the config. Any idea what might be happening? Am I missing something. The website for reference is: http://bit.ly/QvUiU7

    The click event is off the main menu: Subscribe > Email.

    Thanks for any assistance!
    John

    Like

    1. After e-mail discussion, the answer was:

      It looks like I got it working. Should have seen it sooner, but the
      trigger should be attached to:

      $(‘a.iframe’).trigger(‘click’);

      Best,
      John

      Like

  23. Hi,

    The puglin is wonderfull, but i have one cuestion, It is possible to launch two different dialogs through two different links?
    It works fine with one Dialog, but when i try to add a new Dialog, the two links launch the last dialog I created, is it a way to launch the first dialog through the first link and launch the second dialog through the second link?

    I use the following code to lauch the first dialog:

    Click here to open dialog

    Many thanks for your support.
    Kind Regards,
    Ion.

    Like

  24. I have installed modal dialog at my website and it works fine. But it does not allow me to change the size of title. Also doesn’t let me add space in page using. . Tried everything but may be theme is stopping it or I am doing something wrong.

    Like

    1. Hi Arn, On which page of your site did you set Modal Dialog to appear? I need to see how you configured it and how it’s appearing to be able to recommend a solution.

      Like

  25. I finally managed to run this wonderful plugin. I wanted to ask you one thing. I want to show the popup forever, without cookie, expiration and even 10000 times a day. how set “Number of days until cookie expiration” and “Number of times to display modal dialog”? I have not found a guide to all the various options. maybe some options are redundant. thank you and sorry for my poor english.

    Like

    1. Hi Luca, You can just check the ‘Set display cookies manually’ box and not set the cookie. That way, it will always display.

      Like

      1. thank you, perhaps it might be useful a light version of the plugin, where you can leave only when and where to show the popup (after a post especially) 😛 thank you again

        Like

    1. Hi Scott. Sure, you can just set the number of times to display to 0 and use the following code to get it to open from a click:

      [a onClick=”openDialog();” href=”#” title=”Email”]Email[/a]

      Along with this JS in the footer:

      function openDialog() {
      alert(‘in openDialog’);
      $(‘a#inline’).trigger(‘click’);
      }

      Of course, square brackets should be replaced with HTML brackets.

      Like

      1. trying to use the onclick trigger without any success. putting the function into the wp footer. if I comment out the line: $(‘a#inline’).trigger(‘click’); the alert will be called but if i leave that in no alert and no modal. any ideas??

        Like

      2. Hi Chris, Can you send me a link to the page where you are trying to do this so I can see it live and run it through Firebug?

        Like

      3. Hi !

        Thank you for your useful tool. I also need to load it on a click. I might be dumb but when I use the code you just gave chris, an alert pops up and says “in openDialog”. I surely missunderstood your explanation, but I just don’t get it…
        Thanks !

        Like

      4. Did you look at the FAQ section under the Modal dialog menu? It shows how to get the dialog to open from a click.

        Like

  28. Okay, I actually ended up making a quick patch for my issue. I actually just pointed the Fancybox plugin to your set of Jquery fancybox files. But if you have the correct way, I would definitely appreciate some advice. This is just a temporary fix until I find a better solution.

    Like

    1. Hi Ram, Sorry for the lack of response. I have been getting much more spam than normal with the recent attacks on WordPress sites so I did not see this go by. What you did is pretty much the only thing to do. The two plugins use slightly different versions of fancybox, thus making them not work well with each other.

      Like

  29. Hi Yel,

    I’ve spent a couple of hours trying to get this working and no joy, just wondered if you can spot anything wrong with our theme or installation of Modal Dialog if you could help?

    Thanks in advance!

    Like

    1. Hi Dan, What is the address of the site on which you are trying to use Modal Dialog? Is it IntentData? I looked on that site and am not seeing any trace of Modal Dialog, at least not on the front page. Please indicate the address of a page on which you expect to be seeing Modal dialog and I can see what is happening.

      Like

  30. Hello Yannick,
    I’m currently using your modal dialog plugin. I like the structure, however it doesn’t fit what my client wants. She wanted me to use Quform, which is another wordpress plugin for form, on the dialog. So I used the shortcode of Quform, unfortunately the form wasn’t rendered. I’m using the configuration value Content Source:Specify Below on Dialog Contents

    Hoping for your immediate response and Thank you in advance for any help.

    Your Fan,
    Joseph

    Like

  33. Pingback: My Top 10 Must Have FREE Plugins for Any Wordpress Blog

  34. Yannick, can you send me to a couple of websites that use Modal to promote their blog? I have a WP site and want to configure it but would like to see some live demonstrations.

    Like

    1. Hi Howard, if you are looking on documentation on what each option does, then I am sorry to say that I never fully documented Modal Dialog to that extent. Do you have a specific question on what you are trying to achieve? Or is the plugin simply not display a modal dialog on your site?

      Like

    1. Hi Daniele, I am not sure how well the login / registration screen would work. Mainly since logging it typically sends you to the admin dashboard, and that would end up showing up in the modal dialog window. the user would then need to close the dialog and refresh the site to see the logged in sections.

      If you had some other plugin installed that would redirect users to a specific page on the site, then you could have specific javascript on that page designed to get the login dialog to close, and also to trigger a refresh of the page, but that might be getting a bit involved.

      Like

    1. I am not sure this can be done. Page unload scripts are quite tricky. I got the dialog to show up as the page exits, but it still keeps going to the next page.

      Like

      1. Hi Yannick,

        Thank you for the reply. I thought that might be the case, but that I would check any way. We basically need it to load at the end of the session and I can’t think of anyway to do that except on page unload or maybe just delaying the trigger event.

        Like

  38. Hi Yan.
    Love the plugin.
    One problem I have is on the following URL, http://goo.gl/Xl6olw , half of the image is cut off when viewing on a mobile device. I have tried toggle of the auto size option, but no luck.

    Any help is greatly appreciated.

    Rich

    Like

    1. Hi Rich, Indeed, Modal dialog does not size correctly on mobile browsers. This is why I put in an option to disable the popup when the site is viewed from a mobile browser.

      Like

    1. It is generally preferable to disable Modal Dialog on mobile browsers using the option under the General Settings.

      Like

  40. Hello Yannick, thanks for this great plugin!

    I was wondering if there is a way (and if there is not maybe it is interesting for a future feature) to not show the Modal Dialog for users that come from specific websites.

    For instance, not showing it to news aggregators, since in my experience some people there judge quickly and without reading the content that having a modal dialog asking for a facebook fan/registration, etc a sign of a “spammy” site.

    Thanks again!

    Like

    1. Hi Santiago, I will try to implement this functionality. That being said, from what I read, having such a function is not bulletproof and there may be false-positives.

      Like

  41. Thank you Yannick for your response, it sounds amazing to have something like that even if it can’t be bulletproof as you mention. Happy 20141

    Like

  42. I have used your plugin in the past with great results. However, I was doing a rework of our website and have upgraded to Gravity Forms. Anyway, when I try to post the shortcode in the modal box it does not pull the form. Any thoughts as to what is causing this action?

    Like

    1. Hi Brian, I know that there is a problem with Gravity Forms. The problem is that they have implemented short codes in a strange way that prevents them from working correctly with Modal Dialog. Other problems have also had this type of issue integrating with Gravity Forms.

      Like

    1. Hi Vivek, I just sent you a reply by e-mail. As indicated, the problem is most likely a conflict between Modal Dialog and one of the Javascript libraries installed on your site. I will need the plugin to be reactivated to be able to try and troubleshoot the problem.

      Like

  44. Hi Yel,
    Thanks for making an awesome plugin! I am having a bit of an issue on this page: http://azhomesbykellycook.com/home/about-us/kelly-cook/kelly-cook-follow/
    I am attempting to have the slider located on the page pop up. I “think” my issue is the jquery but I’m not 100% sure. Would you mind taking a look and seeing what this won’t display properly?
    I tried this same exact technique on my tester site and had no issue at all, (test site: http://85259scottsdale.com/businesses-draft/ ). But on the main site I get that little window and no content displayed.
    I would really appreciate any help you can provide.
    Thanks,
    Joe

    Like

    1. Hi Joe, Sorry for the late response. I see that the plugin does not seem to be active on the site anymore, so it is hard for me to troubleshoot the problem that you are having. if you would like me to take a look, please reactivate the plugin and let me know when I can see the problem live. Thanks.

      Like

  45. Hi there, it appears the custom width and height have been broken on this latest update of the plugin.

    Like

    1. Are you running 2.5 or 2.5.1? I introduced a lot of changes in 2.5 but had to roll back all changes to create 2.5.1.

      Like

    1. I will look into the width and height issue tonight. The plugin should have gone back to work exactly the same way as 2.4.9, as it’s the same code.

      Like

  47. My client is asking for popup to open in responsive mode.I have referred plugin’s ‘faq’ and ‘support’ sections.Also, comment below.I know ‘modal-dialog’ won’t support.But, is there possible any css tricks.

    Like

    1. I am not sure I understand, you want the modal dialog window to follow responsive design? To do so, you would need to analyze the style of the window and write code for other screen resolutions in your stylesheet to change its style when the window becomes smaller. There is not much else to be done.

      Like

  48. Hi Yel. I am testing your modal plugin to display a youtube embedded video with the autoplay=1 option. This means that the youtube video will autoplay when loaded.

    The problem I have is if the user closes the modal while the video continues to play (you can hear the audio).

    Are you implementing a way to stop the youtube video playback if it’s set to ‘autoplay=1’?

    Thanks, Peter

    Like

    1. You can use the parameter ‘Javascript Dialog Closure Callback’ to provide a javascript function to be called when the dialog closes. In that function, you could make the necessary call to stop the video playback.

      Like

    1. From what I can see, the plugin is not properly configured. Can you make sure it is set to display and that the front page option is checked?

      Like

    1. Hi David, First off, thanks for the donation. Now, it looks like a bunch of the parameters in the Modal Dialog configuration page were left empty, which is leading to an error message. Please try setting the width and height of the dialog OR check the Auto-Size Dialog box to let the dialog set its size automatically. Then we can see if there are any other errors.

      You can install the Firebug plugin for Firefox, visit your site, run Firebug and look at the console to see if you have any scripting errors on your site.

      Like

Comments are closed.

%d bloggers like this: