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

  1. Hi and thanks for the great plugin! After about an hour of trying to figure out why it wouldn't display on our site, I got it working.

    One feature you might consider is allowing the modal to float up and down as the page scrolls until they close it, or click on it.

    I noticed the number of times to display seems to be during the same session. I'd prefer to set the number of appearances, but keeping them to 1 per session. In other words, I don't want to annoy them by setting it to "2" and having the modal pop up every time they go to another page, but rather show the modal once more on their second visit.

    Great plugin though!

    Like

    1. Thanks for the feedback. I will consider working on these features when I get some free time (which probably won't be until september at this time)…

      Like

    2. Hi Ryan. I implemented new options in version 1.1.1 to allow the modal to float up and down as the page scrolls and to only show the modal dialog once per session as you suggested. Please upgrade and let me know if that does the trick for you.

      Like

  2. Hi, thank you for a great plugin.

    I am trying to deliver a form within the dialog content.

    How can I display a link or a button to close the modal after registration is completed?

    Also, how to not display the default close button on the top right corner?

    ThankS!

    Like

    1. Hi Orlando, I added a new option in version 1.1.1 to hide the close button.

      Then, to close the dialog, you could use a button with the following code:

      [button onClick="parent.jQuery.fancybox.close();"]Click Me[/button]

      Just replace the square brackets with HTML open/close brackets.

      I am assuming here that you are specifying the contents of the modal dialog with the Dialog Contents box, right?

      Like

  3. Hi Yannick,

    That works great! Thank you for your help.

    Yes, I am specifying the contents of the modal dialog with the Dialog Contents box.

    About the "Pages to display Modal Dialog (empty for all, comma-separated IDs)"

    I'm using 'Day and name' permalinks settings, is there a way to specify the pages to display the modal dialog?

    Thanks!

    Like

    1. My bad. I did the whole update but forgot to bump up the version number. So while it still said 1.1, it had the enhancements that you guys were looking for. I just updated the version in the code file so it will now be called 1.1.1 but will be the same content that I posted a bit earlier this afternoon.

      Like

  4. I'm confused about the new feature, hiding the exit button. If it's hidden, how do I exit the dialog? Shouldn't there be a timer box to set a number of seconds?

    Like

    1. Hi Dwight. Well, if you selected anywhere as the dialog exit method, then you could just click outside the dialog and it would disappear. Otherwise, as Orlando was asking, you could have a button within the dialog that calls javascript code to request to close the dialog.

      Like

    1. I am not exactly sure what you mean? You would like to be able to add PHP inside of the dialog contents?

      I am not sure that this would be possible as php code is already being evaluated as my plugin's code is being executed. But I could investigate to see what is possible.

      What type of PHP code would you like to add to the contents of the modal dialog?

      Like

    1. Hi Flo, I just released an update to add an option to control the opacity of the overlay. Just upgrade to 1.1.5 when you see it on the WordPress update list.

      Like

  5. Noor alhob: Can you send me an example of the form code that you are trying to add? If I am going to implement a way to add PHP code, an example would let me ensure that at least your code works correctly.

    Like

  6. This is what I am trying to add

    <form action="/wp-email-comments.php" method="post" id="commentform">

    <input type="text" name="email" id="email" value="" size="22" tabindex="2" />

    <?PHP

    if(isset($_GET['ms']) && $_GET['ms'] == "1")

    {

    echo "Thanks for joining";

    }

    Like

    1. I will hopefully be able to look into this next week. I am currently swamped between work and preparation for Wordcamp Montreal.

      Like

  7. Hi Margarida, To manually trigger the dialog opening through a link, set the "Number of times to display Modal Dialog" to 0. Then, use code like this on the page where you want to show a link to open the dialog:

    Click here to open dialog

    // Create the tooltips only on document load

    function openDialog() {

    jQuery(“a#inline”).trigger('click')

    }

    In this case, the trigger to open the dialog is a text link but it could also be a button. Let me know if this works for you.

    Like

  8. Can you please post the actual code you used as a text link to open the dialog? I looked at the page code and copied what you have, but it will not work.

    Like

    1. Here is the code to open the dialog:

      To manually trigger the dialog opening through a link, set the "Number of times to display Modal Dialog" to 0. Then, use code like this on the page where you want to show a link to open the dialog:

      [a href=&quot;#&quot; onClick=&quot;openDialog()&quot; rel=&quot;nofollow&quot;]Click here to open dialog[/a]
       
      
       
      [script type=&quot;text/javascript&quot;]
       
      function openDialog() {
       
      jQuery(&quot;a#inline&quot;).trigger('click')
       
      }
       
      [/script] 

      Just replace the square brackets with HTML brackets.

      Like

  9. Hi Yannick Lefebvre,

    The plugin that you have created is beautifull and its easy to use….A big round of .Applause for your effort.

    It works beautiful on my local site. But when I upload it to the hosting server… it doesnt work. I am doing exactly as I did before.

    I am completely out of ideas, Please help me out…..

    Thanks

    Prabhakar

    Like

    1. Hi Prabhakar, do you use the same theme on both your local site and your hosted server? If not, then there is a good chance that the theme on your hosted server is missing the wp_head or wp_footer php functions. Another possibility is that you have more plugins on your live server than on your local server. In that case, perhaps another plugin is breaking the jQuery code from Modal Dialog because of some bad code.

      Like

  10. Can you please email me personally. I've copied the code as you suggested and cannot get the manual code to open the modal box. Please help.

    Like

  11. Hi Yannick. I'm still experimenting with the Plugin, but it looks great – thanks!

    I'm having trouble with limiting the display to specified pages. I have a testbed on my LAN that's a pretty raw WP install, and can't get it to work there using the IDs. No fancy permalinks. And I've also tried on a live WP install that has more things installed and fancy permalinks.

    Any ideas?

    Thanks!

    Like

    1. Hi Mike,

      Are you sure that you are using the numeric page IDs to restrict where the modal dialog will be shown?

      Like

  12. Thank you for the plugin… There is one room for improvement. I think you should place a preview option to see the changes we have made. I am not willing to clear the specific cookies every time I made a change. Thank you once more for the plugin.

    Like

    1. Indeed, a preview button would be an interesting option. I will look into this come December when I start having time to work on my plugins again.

      Like

  13. Hi Jannick, great plugin!

    Is ther a way to make the modal window automatically disappearing after a given time without the need of a click?

    Like

    1. Hi Inma, I just released version 1.1.7 to add a new auto-close option. Please let me know if this works for you.

      Like

    1. Perhaps later down the road. I'd have to think a bit more about how to implement it. And I definitely won't have time to look into this until December.

      Like

  14. It seems this plugin has some issues with mobile templates…

    Fatal error: Cannot redeclare md_install() (previously declared in /home/public_html/wp-content/plugins/wptap-mobile-detector/md-includes/function.php:10) in /home/cjt/public_html/semiose.net/wp-content/plugins/modal-dialog/modal-dialog.php on line 64

    Like

    1. Actually, it's not a problem with mobile templates, but just the fact that both myself and the developer of Mobile Detector thought that md_install was a good function name for our respective plugins.

      I just published an update to change the name of that function. Should fix the problem.

      Like

  15. Is it possible to use the dialog to ask users a yes/no question and if yes show one webpage and if no show another web page?

    Is it possible to have buttons on the dialog?

    Like

    1. Hi Rosemary. Yes, you can have buttons in the dialog, following standard HTML tags. Then, based on which button they click on, you can use javascript calls to redirect the browser window and close the dialog.

      Like

    1. Hi Mox, Sorry for the late reply. I was gone on a 10-day work trip around the time that you sent this in. The problem between Modal Dialog and Fancybox for WordPress stems from the fact that it is using an older version of the fancybox plugin. Modal Dialog uses version 1.3.1 which Fancybox for WordPress uses 1.2.6. The other plugin would need to update its version to the same one as Modal Dialog in order to work correctly.

      Like

    1. Hi Frank, As I responded to you privately, there is a conflict between your theme which uses an older version of fancybox and Modal Dialog. The best way to fix this would be to modify your theme so that it stops loading the fancybox jquery plugin since modal dialog is already loading it. Alternatively, you could have it queue the request to load the script and make sure that it loads the same version as modal dialog.

      Like

  16. Hi, Yannick. Is it possible for the modal window to show up before the page starts loading? Now it is at the end of the code before the tag, so page loads first even if the Appearance Delay option is set to 0.

    It also has some problems in IE, always IE 😉 It does not auto-close.

    Thanks for your time and help.

    Like

  17. I second the request to make this available for individual pages as different popups. I'm creating a sort of "local" advertising site where each local business will have a "video introduction" on their own page…including a map (with a link to their Place page). It works great, now, btw! It just has to be done on a different site for each business. I'd love for the site to have a page for that business with it's own corresponding "intro". I'd help pay for this development…

    Thanks,

    Like

    1. Hi Phil, Thanks for showing interest in supporting this development. Probably won't be until the new year but I'll put it on my ToDo list.

      Like

  18. Hi Yannick,

    Everything else about the plugin configuration is working great, except the pages by id setting. The pop up is still occurring on all pages.

    For the ID setting I used the following 1,2,3. Is that the correct way to enter in the IDs?

    Thanks for the cool plugin and any assistance you can offer.

    Chris

    Like

    1. Hi Chris, sorry for the late reply. Yes, you are entering the page IDs correctly. Can you give me the address of the site where you are trying to use it so I can try to see why it's not working right? Might be a javascript conflict with other things on the page. If you don't want to post the address here, use the contact form to send it to me.

      Like

  19. There is another element floating above the Modal window when it is active (turned off right now) can this be solved with a z-index of some sort? If so, where would it go?

    Like

    1. Hi Andrai, I would need to see the page where the problem is occuring to fully understand how to resolve the issue. Can you send me the address here or using my contact form?

      Like

  20. Hi Yannick, Could you tell me please how do I change your plugin to load jus after the body opening tag? I'd like the modal window to load before the page starts loading.

    Thnks

    Like

    1. Hi Inma, Modal Dialog places itself in the footer, based on the wp_footer function being present in your theme's footer template. Why are you looking for that code to be after the body tag? I am just trying to understand the use case? Is it for visual priority of elements?

      Like

  21. Hello Yannick,

    Thank you so much for this awesome plugin. Is there anyway to have the modal activate when a link is clicked instead of when the site first loads? What I'm trying to do is add a dialog box which will ask users for information to sign up to a mailing list when they click on the link.

    Thanks

    Like

    1. Hi Jack, Sure. 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=&quot;#&quot; onClick=&quot;openDialog()&quot; rel=&quot;nofollow&quot;]Click here to open dialog[/a] 
       
      [script type=&quot;text/javascript&quot;] 
      function openDialog() { 
      jQuery(&quot;a#inline&quot;).trigger('click') 
      } 
      [/script] 

      Just replace the square brackets with HTML brackets.

      Like

  22. Hi Yannick, thanks for this wonderful plugin. It is running in my other sites, however, it's not showing in my MU site (the website linked on my name).

    I have deactivated Lightbox 2 plugin, but still it's not working. I checked my themes and they have proper wp_head / wp_footer tags.

    Like

    1. Hi Roel, Can you give me a link to the page where it's not working? Have you checked Firebug for any Javascript errors?

      Like

  23. Hi world, and nice new year for all¡¡¡¡

    well, since the last WP actualitation of this past January, 1th, 2011,

    these plugins has stopped to work ('Modal Dialog' ana 'Pop your

    notes'). If I deactivate Mailpress… boom.. they comes again… but i

    loose Mailpress

    I search in my ISP logs for errors but I can not find nothing…:-(

    Please, can a good person in this wonderfull world help me??? any

    ideas???? maybe jquery is loaded more than once ?

    how can i fixit?????

    thanks a lot

    Asis

    Like

    1. What you should do is to activate all plugins, then go to your site and see in the page source if you see jquery.js (or similar names with version number) loaded more than once on your site. If they are, the way to fix it would be to request that the other plugin authors use the wp_enqueue_script function to use the WordPress copy of jQuery instead of loading their own.

      Like

  24. Great plugin!! Fits the bill exactly.

    Just sent you a donation albeit meager.

    However, can't get it to appear at rsci.com.

    There are no conflicts (according to firebug) and the modal scripts seem to be present in the source. Any suggestions.

    Thanks!!

    Like

    1. Hi David,

      Thanks for the donation. I took a look at rsci.com and saw the modal dialog showing up on my end. Did you figure out what your problem was? Or perhaps you saw it come up once but it does not come up anymore? You can double-check in your browser cookie list if there is already a cookie set for your domain and delete it to see it.

      Which browser are you using?

      Yannick

      Like

  25. Thanks for your quick response. I'm using FireFox, though I checked in Chrome and IE and it was fine. It must be that I'm logged in? Either way, it works fine. Wondering if I can make it appear as a visitor is leaving.

    Thanks

    Like

    1. Hi David, I have been doing some research on displaying a dialog when the user leaves the page but this seems to be a very non-standard browser feature. The main thing to look into would be to find working javscript code that lets you call a javascript function when the user leaves and then call the fancybox function when that happens.

      Like

    1. Hi David,

      I have tried figuring out how to get Modal Dialog to show up on page close but am not having much success. The code to manually call Modal Dialog is:

      jQuery("a#inline").trigger('click')
      Just replace the square brackets with HTML brackets.

      Now, I have been spending over an hour trying to get the modal dialog to come up on exit and it's not coming up right. this page seemed to have some promise but it did not work:
      http://kbeezie.com/view/cross-browser-exit-pop/

      Are you familiar enough with javascript to research this more on your own? I am not 100% sure that this is possible.

      Like

    1. Hi Taylor. Yes, there is a conflicts. The reason is that you are loading multiple versions of jQuery between your theme and the plugins that you use. You will need to seek all jQuery references in your theme and plugins and replace them with calls to load the copy of jQuery that comes with WordPress by using the wp_enqueue_script. Doing this might also require some other changes on your plugins, so you may need to contact the plugin authors for them to fix their plugins to work with the custom jQuery that comes with WordPress. jQuery is a very powerful scripting tool but it also creates a very fragile equilibrium.

      Like

  26. The code itself is quite simple. It is:

    wp_enqueue_script('jquery');

    The tricky part is to find all of the places that load their own copy of jQuery. I saw from your page source that many of your plugins and maybe even your theme are loading jQuery from the googleapi site.

    You would need to modify your theme to load the Wp version of jQuery with the code above.

    Now, what you need to be aware of is that this version of jQuery is a bit different. Namely, you cannot just use jQuery functions with the $. code. You need to spell out jQuery. in order to call functions. So doing this will mean reworking any jQuery parts of your theme.

    Same for plugins. If you just go in there and change their call to load jQuery with the WP version, then you will need to modify the plugin to use the spelled out jQuery function instead of $. This is where I suggest getting in touch with the plugin authors, or maybe finding alternate plugins who do similar things but load jQuery correctly.

    Like

  27. Hello Yannick,

    Modal Dialog appears to be the ticket. I've been messin' with it a bit. Thank you.

    I changed a few configuration options several times. Finaly deciding I want Modal Dialog to display my existing 'about' page. I had first configured "Dialog Contents" for "Content Source" Then switched to 'web site address'

    This seems a bit odd now when I come to the site I get the about page, and a blank page that looks like the 'dialog Contents" area of the modal dialog plugin settings on top of the 'about' page. That's two pages apparently from modal dialog plugin. The about page that I have configured and a blank dialog contents source page on top. Both with 'x' close buttons.

    I've been testing it on a site, http://www.jhalbrecht.net, I use almost exclusivley for experimenting with new plugins before I deploy to my main site http://www.rodaw.com. Check out jhalbrecht.net if you want to see if the same behavior is displayed for you.

    A suggestion. I'd like to see some option on the admin page to clear the cache/ip for testing purposes – or if changes have been made to the modal page that you would like all users to see. That way my ip can be reset to simulate a 'first visit' condition.

    Thanks, – jeffa

    Like

    1. Hi Jeff, Actually, what I think might be happening is that the sub-page that you are now loading in the first Modal Dialog is trying to load its own modal dialog window, but is just failing at loading the actual content of the second modal dialog. The Web Site Address mode was meant to be used to load an HTML page off another site or a page on the site without all of the same header and layout.

      Like

    2. Also, about your question on being able to clear the cache/ip, Modal Dialog actually uses cookies to track whether or not you’ve seen the pop-up. So just remove the cookies for your site and it will be as if it was a “first visit”.

      Like

  28. Kudos for the plugin, tried it on a friend’s site.

    Though i have one complaint : i can not set Modal Dialog to display image on a main page every time site is reloaded into browser. I tried several combinations, but unfortunately either image pops up if i click on any link on page (effectively blocking the site), or it displays once and then stops (again, not wanted). Best i could do i pop up once per day. Once per session is killing re-display on main page.

    To me, problem seems to be that plugin can re-display pop up content, but can only do so if pages are defined, so in this specific case it pops up everywhere.

    Can you add option to show pop up on only on specified comma separated list of URLs ?

    WordPress version : 3.0.5
    Plugins version :
    – Akismet 2.5.3
    – Google Analytics for WordPress 4.0.9
    – Modal Dialog 1.2
    – WPMU Admin Interface Language 1.1

    Like

    1. Hi squeeze, The option you need to set is “Set display cookies manually”. This will make it so that the modal dialog keeps popping up since the cookie to determine if it should be shown will never be set.

      Like

  29. I need some help in those cookies and stuffs
    I want this to pop-up only for first visit of the day… then the next pop-up should happen only on the next day’s first visit

    For this how should i set those cookies?

    My current settiing are
    Number of days until cookie expiration = 1
    Number of times to display modal dialog=1

    what should I do with Set display cookies manually and Show once per session??

    Like

Comments are closed.

Create your website at WordPress.com
Get started
%d bloggers like this: