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 Martin,

      The problem is that you have multiple copies of jQuery and multiple of fancybox (the plugin I use to render the dialog box) loaded on your site. if you look at your site’s page source and search for these keywords, you will see which plugins load each copy. For jQuery, you should have a single copy loaded, and it should preferably be the one that comes with WordPress. Do you have a plugin installed that loads a copy from the google site for performance? That seems to be messing things up since that copy gets loaded towards the bottom of the header. jQuery shoudl normally be loaded before the fancybox jquery script.

      Does that help? Let me know if you need further assistance.

      Like

  2. Hi Yannick,
    Thanks very much, the code for opening the dialog on click worked perfectly. My next question is that I’m trying to use modal dialog for a contact form created by contact form 7, and wondering if you have any advice for getting the CF7 shortcode to work inside of a modal dialog. Thanks in advance!

    Like

    1. Hi David, Are you running a recent version of Modal Dialog? I tested with the latest version, putting the Contact Form 7 shortcode in the dialog contents and the contact form showed up as expected.

      Like

  4. Hello Yannick,

    I, too, am unable to get the pop-up to appear. I do have several jQuery scripts and think they may be conflicting. Is there any way to move and/or combine them?

    It looks like you’ve enabled short code. I using this with WP Newsletter (Tribulant) to attempt to generate a subscribe pop-up.

    I am using Headway 2.011 platform. Modal Dialogue 2.2.3

    http://wheresmyfuckingmoney.com

    Thanks,

    Roy

    Like

    1. Hi Roy, I see that you now have Modal Dialog showing up on your site. I guess that you figured out where the conflict was?

      Like

      1. Yannick,

        Thanks for getting back to me. Could the reason that I’m not seeing it be due to the fact that I’ve somehow excluded myself as an administrator? I’ll check the settings again, but I don’t remember seeing that as a possibility.

        Roy

        Like

      2. Yannick,

        Thanks again. I realized I could just increase the number of time the dialogue shows to see it over and over. One last question: What is the css to just fill in the 10px border around #fancybox-outer. I almost have what I want by using background-color: #xxx; but that also effects the data fields.

        Roy

        Like

      3. Hi Roy, Have you just tried setting the background color on the #fancybox-outer class and then specifically setting the background of data fields back to white?

        Like

  5. Yannick, how can i configure the modal box to not show scroll bars? I have overflow set to hidden on all of the elements within the dialog box. I can get it to look right and have a nice tight wrap around my content in firefox and chrome but than stupid IE messes it up with scroll bars. Any ideas?

    Like

    1. Hi Brandon. Of course IE would show things slightly differently. I am not sure how to play with the CSS to remove the scroll bars. I use fancybox to render the modal dialog box.

      Can you try the following:
      Go to line 921 of the modal-dialog.php file and add the following code line:

      $output .= “‘scrolling’: no,n”;

      This is after the jQuery creation of the box. Please let me know if this work. I will add an option to add this output if it does.

      Like

  6. First off… great plugin. Amazing how hard it is to find a modal that works with shortcodes. I do have an issue though… the width and height of the box is not working. No matter what I set it at, the box comes up at the same size everytime. Any ideas?

    Like

    1. Hello “Reality”, I just tested on my site and the width and height settings are working as expected. Can you give me a link to the site / page where you are currently trying it out? I will see if there are any javascript / jquery issues coming up.

      Like

  7. Yannick,

    Sorry for the delayed response. I finally have some time to work on this again. You had added the feature to only show the modal window to users that are not logged in and to have it pop every X many clicks. Over-all it is working great. I’m having any issue unrelated specifically to your plugin, but I figured I’d run it past you since it is indrectly related. If you visit http://www.westchasehomesdirectory.com/ then click on either of the first two items under “Neighborhoods” those are the only 2 pages that I have the plugin working on currently for testing. You will see the modal window pop up every 2 clicks on those pages. The window that I am loading is a custom login page. You can use kboyette7(at)gmail.com and the password of test1234 to log in (change (at) to @). As you will see it works great but the login redirect occurs inside the modal window. once the window is forced close it actually works as planned, I would like to figure out a way to close that modal window when the form is successfully submitted. Note: i can point the user to any page when the form is successfully submitted. so maybe I send them to a “thank you” page that has script to close the modal window????? Any thoughts would be appreciated.

    Like

    1. Hi Kevin, Indeed, you could add a script in the thank you page that closes the modal window. The code to close the window is:

      parent.jQuery.fancybox.close();

      So, on your thank you page, you could add the following javascript:

      [script type=”text/javascript”]
      setTimeout(
      function(){
      parent.jQuery.fancybox.close();
      }, 2000);
      [/script]

      Replacing the square brackets with proper HTML brackets. I have not had the chance to test this but think it would do the trick.

      Like

    1. Hi Paul, I am unclear as to where you need help. Is it in designing the contents of the dialog to look like theirs? Or in the way that the buttons work?

      Like

      1. Basically designing the contents of the dialog. sorry im very bad with this, any help would be very appreciated!

        Like

      2. Hi Paul, This is very basic web design work. And not very nice one at that. At a very high level, you should look in the page source, find the section that contains the pop-up contents and copy that HTML segment into your dialog settings. Once you have that, then you will need to download the images and store them on your server. Finally, you need to use a tool like Firebug to check the styling of the different elements and add these styles to your own site’s stylesheet. I will not go into more details on this topic.

        Like

  12. Hi Yannick,

    Wow, it took me a long time to find this plugin but, as with most people who have posted on here, I have a problem…and it’s probably bigger than all the other problems put together – I am by NO means a developer or a programmer…I’m anything but that!

    So….I have no idea how to configure it to pop up with my newsletter opt-in page that then links in with my iContact autoresponder.

    I was hoping to find a tutorial on your site – I’ve been to the plugin files on WordPress, but that’s way beyond me.

    Can you help? Can you direct me to optimizing your plugin for dummies?

    Many thanks…
    Hermione

    Like

    1. Hi Hermione, Indeed, this is quite a request. While my plugin allows you to display a form, the rest of it is very specific to your site setup and what you want to implement. Do you have someone who can help you with general form implementation?

      Like

  13. I’m having the opposite problem that many others have: the modal dialog always pops up on my front page even when I have Activate: No. I only want to use the dialog occasionally on my front page to announce special events. Is there any way to turn of the auto popup on the front page, or do I need to deactivate the plugin altogether?

    Like

    1. Hi Boris, I do not understand how the popup can come up even when it is not activated. What is the current configuration of the pop-up right now? I visited the site twice and the pop-up only came up on my first visit. The popup visibility is based on cookies being set. Do you have your browser configured to refuse all cookies?

      Like

  14. Great plugin thank you!
    Here is a feature idea:
    What about a test section where you can preview how the popup is going to be displayed?

    Thanks so much!
    PS: Keep up the great work!

    Like

    1. Hi Pit, I have had this request before but have not yet found a good way to implement it. I will need to think about this some more and see if I can put something in place.

      Like

  15. Hi can you please help me? I love your plugin, and I’ve used it on my site, I used it to frame a php page with form, but the problem is it doesnt close after I hit submit, is there anyway to do that? I will donate after you help me promise! 🙂

    Thanks!

    Like

    1. The best way to get the form to close would be to direct the form to a thank you page and then add a bit of javascript to the page to close the dialog after a few seconds:

      setTimeout( function() {parent.jQuery.fancybox.close();}, 2000);

      In this case, the box would close after showing the thank you page during 2 seconds. Let me know if this works for you.

      Like

  16. Yannick, Thank you for the quick response! yes it did work perfectly! 🙂

    More power to you! and God Bless!

    Like

  17. Hi, This is very nice plugin. Is there a way to get the dialog window pop up on a click on the link rather than on a page open event?

    Like

    1. Hi Pawel, Yes, this is possible. Just set Modal Dialog for manual trigger in the options, then use the following code to open it, or something along these lines.

      [a href="#" onClick="openDialog()" rel="nofollow"]Click here to open dialog[/a]

[script type="text/javascript"]
function openDialog() {
jQuery("a#inline").trigger('click')
}
[/script]

      Just replace the square brackets with HTML brackets.

      Like

  18. Hi Yanninck,
    I have some questions regarding the modal dialog plugin:
    + Number of days until cookie expiration – does the numer reset on each customer visit ie. starts counting form 0 or does the cookie expires in NNN days after first visit?
    + Does Auto-Size Dialog overrides auto width and height?
    + Please explain the dependencies between “Show once per session”, “Period to display dialog (every # page loads)”, “Number of times to display modal dialog” as it is not obvious how to use all of them nad how they influence each on another.
    + Is it possible to have transparent background for the modal window instead of white one?
    Regards
    Piotr

    Like

    1. Hi Piotr,

      – No, the cookie expiration does not reset on new visits at this time.
      – Yes, auto-size overrides I believe.
      – Show one per session will set a cookie on the first page that will prevent the dialog from being show until the user closes his browser. Period to display shows the dialog every x number of pages as the visitor browses around your site. Number of times to display specifies how many times the display should be shown total before it stops being shown.

      It might be possible through stylesheets to change the background to transparent. You would have to modify the stylesheet from the fancybox plugin that is delivered with Modal Dialog. That will give you some trouble when you upgrade versions. Why are you looking for a transparent background?

      Like

  19. Thank you Yannick. Everything is clear now. I dug into fancybox code and its css’es and found that there are lot of parameters passed to the fancybox, autoresize among others. Unfortunately auto resize does not work for me. I had to use fixed dimensions.
    I also changed fancybox’s css to achieve the result as here:
    http://www.potencjalosobowosci.com
    This is why I wanted transparent background. In this solution the size may be fixed as the bakground is transparent. When dispalying the same content of modal box in different browser the html code takes various area of the box – depending on browser. This resulted in bigger or smaller bottom margin. With transparency there is no such problems.
    Kindest regards
    Piotr

    Like

    2. Firstly Piotr, i visited your site and the changes you have done to it are fantastic. Secondly Yannick I take my hat off to you dude. Im going to give this plugin a go.

      Like

  20. Dear Yannick,
    thank you for your work and first sorry to my english. I have one Problem with your plug-in.
    I have instaled, first times its works – but only one time. Now it is not work. I proove it on my PC in work and home, but polite doesn´t work.
    I am beginner in WordPress so can you help me? I think i have good jquery version and footer is in according themes.
    Can you help me with this problem?
    Thank you, Petr

    Like

    1. How did you configure it? How many times is the dialog configured to come up? There are a lot of configuration options available to specify how it will come up. Do you want it to come up all time forever? If so, just delete all your current cookies with the delete cookies button and set the option to set cookies manually. It will then come up all the time forever.

      Like

  21. Hi Yannick,

    Is it also possible to show all the posts of a wordpress site in your modal plugin?
    How would need to set it up?

    Thanks so much
    Gaston

    Like

    1. Hi Gaston,

      Just to be clear, you would want to show all posts of another wordpress site in a modal dialog? it might be possible by creating a PHP script on your site that queries the RSS feed from the other site. However, I would like to understand what you are trying to achieve? Are you trying to display a list of sites and show examples of posts for each?

      Yannick

      Like

  22. Thanks very much for the popup! I’ll be using it mostly for emergency announcements, which can change throughout the day. I’m not sure how to set the cookie options. I want the dialog to show the first two times the user comes to the site that day – no matter which landing page.

    If the announcement changes during the day, I want the user to see the new message twice.

    What should my settings be?

    Thanks again,
    Christina Black

    Like

    1. Hi Christina, You should set the number of times to 2 and the duration to 1 day, but you should also change the cookie name if you want the dialog to be shown again on the same day. Perhaps use the date and time in the cookie name so that it always changes.

      Like

    1. This is kind of difficult for me to troubleshoot. it is likely due to a jQuery conflict. You can install the Firebug plugin in Firefox to try to see what is happening with its debugging capabilities. If that does not work, the only other way would be for you to run a session using a tool like teamviewer where I could see your desktop.

      That being said, the first thing to try would be to deactivate ALL of your plugins and see if Modal Dialog works. It it does, reactivate plugins one by one. If it does not, then try switching back to the default WordPress theme and see if it comes now. This will help determine where the problem is.

      Like

  24. Hello,

    thanks for your plugin. It works great and it has been exactly what I’ve been looking for for a long time. But…….

    I would like the popup to show no matter what page a visitor arrives on. On this moment only the home page will show the popup.

    Greetings Henk

    Like

    1. Hi Henk, Could you send me a screenshot of your Modal Dialog Settings so I can see if anything is misconfigured?

      Like

  25. Hi Yannick,

    I am trying to add your plugin to my website for a feedburner form but it does not seem to load up. I tried clearing up cookies and a few different settings but it does not load up at all. Any ideas? Help would be appreciated.

    Regards,
    Ron

    Like

    1. Hi Ron, Did you deactivate the plugin? I am not seeing the expected output in the page header and footer? If so, please reactivate it so I can troubleshoot. If the plugin is still active, then check that you have a call to wp_head in your theme header file and to wp_footer in your theme’s footer file.

      Like

  26. Hello, I know i’m having multiple conflicting issues with fancybox’s (i have yours and then one from “Unite” theme) Where your overlay color works perfectly but like a common one like background color won’t change from the UI. I figured I would ask if there was anyway to combine or resolve an issue like this?

    thanks,

    Vermino

    Like

    1. Nm – 5 minutes after I posted this, I found another individual having the same problem. So pretty much I’m going to have to go into the code and try to manipulate it so it works. I need it for Newsletter + Online Booking so another thing to grit my teeth on localhost. It’s a neat little Plugin you have also and LOVE your Freeware DB – just reformatted my computer and trying to run down the “thought list” what i need to install again.

      Like

  27. Hi Yannick
    sorry WP newbie here
    I’ve been trying to add the plugin to my site
    installed all ok, but not working – do you think I have done something wrong? maybe it is a conflict with another plugin, if it is any suggestions on how I can fix it please?

    site is:
    http://www.coachfinish.com

    when i check the source code i am seeing the jquery ok in the head, but nothing coming up on the page
    many thanks in advance!
    Collette

    Like

    1. Hi Collette, The problem is that your theme is loading its own version of jQuery instead of using the one that WordPress provides and making sure that only one copy is loaded. This is a common problem with theme authors. To resolve this, you would need to remove the line that loads jquery.js from your theme’s header file.

      Like

      1. H iya
        thank you for such quick reply
        oh dear 😦 any thoughts on which line of code needs deleted?

        Like

      2. I cannot see the code from your theme’s header.php file. If you send me the file over using my contact form, I can tell you what to try to delete.

        Like

  28. First of All: AMAZING plugin. Live saver in my case.

    Second. I will love to know if anyone here (plugin author) can tell me if i can make the modal load on a button click too.

    You see, i have it to welcome newcomers and subscribe to my newsletter.. Perhaps the newcomer will NOT subscribe the first time, so they will close the modal.

    After a while of surfing, they may decide they want to subscribe, so the click on a button and the modal appears again..

    any thoughts on this ? is it possible to do ? can you help me ?

    This will rap it up for a DONATION =) ..thank you for working and releasing this!

    Like

    1. Hi Jon, Sure, you can get the dialog to open through a click. Here is a sample code showing how to do it.

      [a href="#" onClick="openDialog()" rel="nofollow"]Click here to open dialog[/a]

[script type="text/javascript"]
function openDialog() {
jQuery("a#inline").trigger('click')
}
[/script]

      Just replace the square brackets with HTML brackets.

      Like

      1. Thanks for the Quick Reply Yan.

        oddly it wont work. I tried putting the JS code in the header too with no luck. it just open the target html in a new window instead of launching the modal. Odd.

        cheers.

        Like

      2. Hi Jon, Can you give me the address of the site where you are trying to do this? I would like to run it through Firebug to see what might be happening.

        Like

      3. Any other suggestions YAnnick ? PErhaps i have js issues ? it wont work. and i cant find how to set the plugin to open manually .

        Like

  29. I have the plugin on two of my sites. One site it is working perectly! The other site not at all. I have it configured the same on both sites. I did fid=nd if I deactivate
    jQuery Slider for Featured Content plugin
    It will work? I want to keep that plugin also is there anyway to have it work with both?

    Like

    1. Hi Bryan, There is most likely a jQuery conflict between the versions of jQuery used by Modal Dialog and the slider plugin that you have. Looking at your site, I can see that the slider plugin that you have loads its own version of jQuery instead of asking WordPress to load it’s copy. This is not a good plugin design. The author of that plugin should use the wp_enqueue_script function instead to request for jQuery to be loaded and so WordPress makes sure only to load one. You should contact that plugin’s author to ask him to fix this.

      Like

      1. Hi Yannick,.. for me the plugin works perfectly ,, it loads as i configured.. my problem is that i use your code to load ir on click and it wont work.. any ideas ? i cant find the way to settit up ..

        Like

  30. Hi Yannick. Just wondering if there is a way to get my video in the popup to autoplay. Currently I have a youtube vid there but requires a visitor to hit play. Any help would be appreciated. Thanx,
    Matt

    Like

  32. Hey,

    Trying to setup a modal dialog to encourage newsletter subscription, however it seems the plugin does not load and page shows an error like ‘Object doesn’t support this property or method’.

    I’m using a theme called 9to5 with the following plugins activated CF7, Google Analytics for WordPress, jQuery Collapse-O-Matic, Newsletter and Sociable.

    Any ideas as to what the cause might be?

    Cheers.

    Like

    1. Hi Cristian, I see that you installed a different popup dialog on your site for newsletter subscriptions. Do you still need me to investigate this issue?

      Like

  33. Yannick, I am attempting to add a second pop-up to my site. I see that multiple modal dialogs are an option. When i add the second dialog it never appears. I have changed the name of the dialog, the cookie name and the session-cookie-name and it never appears. I have tried to deactivate the first dialog and only have the second dialog active and it seems to ignore that setting and only launches the first one that is not “active.” Any thoughts?

    Like

    1. Hi Kevin, Would it be possible to get a link to the page where you are trying to display the second dialog? it should be possible to show two at the same time. That being said, perhaps there is a jQuery conflict on the second page where you are trying to display it.

      Like

      1. Sorry Yannick, I just saw this from you.
        Here is the site.
        http://www.waterchasehomesdirectory.com
        one should launch for the registration, once every 7 clicks, and only display if the user is not logged in. The other should pop up every 3 pages (testing) regardless if they are logged in.

        Also, another issue is. the javascript you gave me a while back to close the modal window when the user is re-directed to the “thank you ” page does not seem to close the window anymore. thoughts?
        -Kevin

        Like

    1. Hi Vince, The scrollbar display is set to be automatic by default, showing based on the size of the contents that you are displaying. have you tried displaying something small at first to see if they go away, then increasing the size of the contents until you read the point when they show up. I can look at adding an option to control the scrollbar display if that does not work.

      Like

  35. Hey this plugin is really nice though I have a problem seeing the preview in the configuration section. Any ideas?

    Thanks 🙂

    Like

    1. Hi Ben, I have not gotten around to implement a preview mode yet for this plugin, hence the problem that you are having viewing it.

      Like

    1. Hi Fabio, Modal Dialog does not seem to currently be active on the site that you listed. Can you give me a link to the site so I can see why it’s not coming up?

      Like

  38. Hi Yannick

    I’m trying to get Modal to work and as suggested checked for JQuery in source code in my theme and it does exist.

    I’m no techie so how do i resolver the problem

    Like

    1. Hi Mike, If the site on which you are trying to get this to work on is helptolosebellyfat.org, then you do have more than one jQuery version being loaded.

      There is one loaded by WordPress, which is fine, and one loaded by your theme, which messes things up.

      [script type="text/javascript" src="http://helptolosebellyfat.org/wp-content/themes/insightmag/js/jquery-1.3.2.min.js"][/script]

      I also see that there is currently a plugin called Opt-In plugin installed on your site that uses the same pop-up dialog as Modal Dialog. This would also cause conflicts.

      Like

  39. Hi

    Great plugin! I haven’t started using this plugin but just checked the configuration options. I would like to know if there is any way I can just show my popup as it is i.e. I don’t want extra background , close button that comes with the plugin. The problem is I already have a popup created and I am going to use that Content Source with “Website ..” option..so if I do this, then there will be one more background becasue of the plugin, I tried removing the #fff from the background option but still the default is white background and also the close button will appear twice.. any way to handle this? Sorry if I am not clear..I will try to get a sample page ready and update here.

    thanks

    Like

  40. hi, I figured it out by editing the css and also the option “hide close button”//…Wonderful plugin!!

    Like

    1. Hi Rob, Thanks in advance for the donation. What did you set when you configured it to only show on the Abotu Us page? If you set the URL, that would cause the problem. You are supposed to enter the numeric page ID.

      Like

    1. Hi Diogo, Just check the “Only show on specific pages and single posts” and “Display on front page” options.

      Like

  43. Hello, How can we create custom close buttons? Like, an “accept” or “no thanks” button instead of the standard close button on the top right?

    Like

    1. Hi Chris, To have your own close button, you would first check the option saying that you don’t want Modal Dialog to display the default close button. You would then create your own button and call the following javascript when it is pressed:

      parent.jQuery.fancybox.close();

      Like

  44. i’m currently using the group buying site plugin, and i want to use your plugin to only show on the deals page on and the single deal page. i tried typing “deal” for the page, and i also tried the page id, which is 23, and it isnt working. am i missing something here?

    Like

    1. Hi Justin, Typing the Page ID of 23 was the right thing to do. Now, there may be a jQuery / javascript conflict on the page. The first step to troubleshoot it is is to install Firebug in Firefox and see if any errors come up when you visit your site.

      If you give me the exact link of a page that should be showing the dialog, but isn’t, I can take a look myself.

      Like

  45. i want it to load on http://myscottsdeal.com/deals which is page id 23, but, when i put 23 in the box to have it load on that page, it isnt showing at all. if i tell it to load on every page, it works just fine. there shouldnt be anything conflicting if it works fine for all pages, just not when defined, and i dont see any issues in firebug.

    Like

  46. Hello,

    We’ve been using this plugin for a few weeks now, and it’s been working fine. But suddenly it no longer functions at all. I’ve disabled every other plugin to ensure it wasn’t being broken due to another jquery call/load/etc.

    Looking a little deeper it would appear that the cookie.js is no longer functioning; at least, it’s not longer setting cookies in any browser I’ve tried.

    I have also completely removed the plugin, deleted all traces of it from the db (which by the way, there should be a reset/uninstall option because after uninstalling it leaves behind entries in the db).

    I’ve tried everything I can think of, but nothing works.

    I’ve tried other jquery dialog plugins and those are working fine (minus the fact that they lack enough options like yours does) so I’m not sure what’s going wrong here.

    Like

    1. Hi Chris, Can you give me a link to the page / site where the plugin stopped working so I can try to see what might be happening?

      Like

  47. I’m also having trouble getting the plugin to work. I suspect a JQuery/Javascript issue but my Firebug console returns no errors. I’ve set it up to run on the link in my name here.

    Much appreciated.

    Like

    1. Hi Eric, I am not seeing the Modal Dialog output on your side. i assume you took it took since it took me a while to answer. Sorry about that. I am involved in a long project right now that is using up all my time.

      Like

  48. Pingback: Modal dialog – wordpress plugin - Blogísek

  49. Hi Yannick,

    Is it possible to trigger the modal only if a user presses a button?

    I.e.: ‘subscribe now’ ===> once clicked, the modal box opens over the existing page.

    Thanks

    Like

  50. Hi Yannick,
    I am trying to get you plugin to work in ie 8 with aweber html code. It works fine in chrome and mozilla but I can’t for the life of me get it to work in ie. Thanks very much for any help you can offer.

    Like

Comments are closed.

%d bloggers like this: