Sugar Modal Windows provides an easy-to-use interface for creating Modal popup windows for your WordPress powered website.
The Modal Windows are powered by slick jQuery transitions and are fully compatible with all modern browsers and IE 7-9.
Modal Windows created with this plugin can contain any kind of information, including text, audio, video, shortcodes, etc.
Your options are limitless! With 13 configurable options for every modal, there are literally thousands of different modal windows you can create.
Use them to show off privacy policies, banner ads, portfolio images/videos, miscellaneous information, additional details, and anything else!
Live Demos
Example Text Modal Window
Adipiscing hac auctor lacus ac purus hac phasellus turpis tincidunt tincidunt porta massa, mus augue, in. Ultricies lundium, mus, rhoncus urna et natoque! Ac. Porttitor augue etiam mattis augue! Amet urna nunc, placerat aliquet nascetur placerat, tristique aliquet. Platea elementum augue nisi cum facilisis sit, ac arcu eros? Sociis ac.
Aliquam natoque integer! Natoque! Placerat? Augue nunc enim nisi? Lacus porta, pulvinar, urna parturient, quis cras et habitasse dolor enim lundium. Aliquet adipiscing hac, a odio ridiculus mattis ut et turpis! Magnis cum dis dapibus mid ultricies phasellus etiam in a elit et in nunc. Et tincidunt elit, aliquet.
Porttitor magna magna, dictumst a pellentesque egestas, turpis ultrices. In urna placerat pulvinar pid pellentesque egestas, purus ac integer, placerat, augue ac lorem, facilisis turpis, tempor platea? Porta parturient, sociis, et? Massa auctor vel pellentesque sed ut? Dictumst tempor! Pulvinar, elementum turpis, purus? Aliquet urna adipiscing porta ultricies amet.
Modal Example with Video
Large with Text and Image
Integer rhoncus scelerisque habitasse. Eros auctor? Vut vut nascetur pulvinar. Diam augue aenean ultrices tortor, pulvinar mus augue, ac cursus integer, tincidunt porttitor ultrices! Porta ultrices ultrices augue in auctor massa natoque magna facilisis nisi! Eros enim turpis est dolor rhoncus vel diam etiam elit scelerisque purus. Tincidunt, quis pellentesque.
Augue. Elit elementum! Dolor in placerat mid nisi integer montes ridiculus porta! Scelerisque, cum mus, pellentesque mus dignissim adipiscing. Vel magnis et. Tincidunt tortor habitasse risus tincidunt? Cursus nec diam cum tortor magna, augue cursus platea? Tempor placerat sit, magna? Nisi, rhoncus lundium nunc porttitor nisi, porta, mid habitasse.
Nisi pulvinar odio. Arcu cum duis dis, cum hac. Cursus mauris, lectus eu vut aenean dignissim! Sed pulvinar? Massa, ac aliquam dictumst augue montes nec? Cum enim ac magnis! Duis, sed integer ridiculus cras nunc! Aliquam aenean lundium lundium urna augue aliquam sed? Quis facilisis, turpis, ut! Est nisi.
This Modal is Opening with Plain Text
Montes augue velit etiam lectus augue cursus scelerisque augue porttitor ut hac penatibus et hac est integer diam diam, tortor cras lorem quis mauris! Parturient! Et, etiam? Proin integer dapibus, lundium amet purus, auctor mus massa tempor, a? Turpis, pid augue lundium augue vut scelerisque nec lorem phasellus! Facilisis nisi.
Adipiscing dictumst massa lacus porta dignissim sagittis eu nunc? Tincidunt, scelerisque integer! Sagittis, facilisis elementum, odio ut ac a lorem tristique sit tincidunt lundium in et mattis nec quis tristique porttitor sit tristique et tincidunt nunc. Ut porttitor elementum, dictumst lectus est adipiscing lectus augue! Sed sagittis sagittis. Est.
Amet, urna placerat rhoncus? Non ut enim! Est adipiscing, in ultrices eu sagittis placerat etiam turpis pulvinar mattis montes, penatibus non. Massa rhoncus vel dolor ridiculus elementum amet? Nec et et amet! Dolor mauris augue amet turpis in scelerisque, dignissim adipiscing, nascetur, platea! Platea arcu proin ultricies risus enim.
Video Demonstration
Features
- 13 options to configure per modal, plus modal title and content
- Create modals with the WordPress post editor
- Display any kind of content
- Display Options:
- Modal Width
- Popup Speed
- Display Modal Title
- Display a close button
- Window Transparency
- Site Overlay Opacity
- Modal Border Color
- Border Size
- Border Roundness
- Title Bar Background Color
- Title Text Color
- Content Background Color
- Content Text Color
- Display Modal Windows with Short Codes
- Easily Insert Short Codes Through Tiny MCE Short Code Builder
- Two “Open Modal” Link Styles: Button and Plain Text
- Three “Open Modal” Button Sizes
- Seven “Open Modal” Button Colors
- Inline Help Documentation
- Extensive Help Page
I think it could be a browser issue, FF is fine, even in IE it shows up fine, without the rounded corners though. I’ll try uninstalling/re-installing Chrome. I havent tried on Opera and Safari.
Great site and awesome plugins you have Pippin. Keep up with the awesome work.
any way to make this thing work with JW player plugin and image slider plugin??
I was so excited for this great plugin, but what I want it to do won’t work…
Unfortunately JW Player doesn’t work inside of the modals, sorry.
Is there a way to make this plugin work in the following way?
–>The popup appears when a user visits a page for the first time that day. To close the popup they have to click a button in the popup that says something like “I agree”, to get them to acknowledge a copyright notice?
Thanks for the help!
Yes it will work that way, though there isn’t anything that would prevent them from viewing the page if they disagreed.
How would the button which closes the popup need to work? Just make it a link to the page that the popup is on or is there a way to code a “close” button. Just bought the plugin btw
You can simply do:
[close]Close Text[/close]
Will this work if I want to have each individual Post or Page configured to open as a popup when clicked? For example, when a user searches my blog, and relevant posts are returned, when they click on an individual post, can the post content (video) open in a popup?
No, sorry.
Hi,
).
For some time modals are being displayed top-left aligned…
Would you please advise?
E.g. after you enter my website click “What can we do for you?” on the left margin in Login section (you may translate it into English first
Thanks,
Maciej
I need a link to your website please.
Hi,
Regarding the ‘strange’ alignment of dialogue…
http://www.softdesk.pl
Thanks in advance!
Maciej
I don’t see the modal on that page, can you point it out?
Hi.
Just rebuilding our website. Email signup form used to display in a lightbox, but this isn’t working with WP 3.5.1
The form code is from a emailing service provider, so pretty standard stuff.
Can I put this form code in a Modal? I also have a button … can this still be used to activate the Modal?
Would rather check these out before buying!
Many thanks.
David
Can you show me the code you need to use? Some embed code does, some doesn’t.
Hi Pippin. This is the complete code, currently shown in a sidebar (using Page-in-widget), but it doesn’t work as a normal page either. We’d like to retain the position of the button in the sidebar. Is this enough for you to go on?
Thanks
David
******************************
[formlightbox_call title="WORD-right newsletter sign up form" class="4"][/formlightbox_call]
Complete this form to receive WORD-right’s monthly newsletter, and your free Introduction to Twitter.
After you confirm your subscription, your Twitter Guide will be sent with the welcome email.
[formlightbox_obj id="4" style="padding: 10px;width:470px"]
Please complete this form to receive WORD-right’s monthly newsletter, and
your free Introduction to Twitter.
After clicking the ‘Submit’ button, you will recieve an email which
contains your ‘confirmation’ link. Once your subscription is confirmed,
your Twitter guide will be sent by email.
E-mail address:
*
First name:
*
Last name:
*
Company:
Country:
UK Europe Rest of the world
(red stars * indicate compulsory fields)
[/formlightbox_obj]
Can you paste that to snippi.com and then share the link? Some of the code formatting got screwed up.
Can you have more than one modal window working on a single page? For example, if I had a number of products on a page and wanted to have a modal window for each one, is that possible?
Yes you can!
At http://www.messagehouse.org/temp you can see a plain link modal (“organizations all around the world”). For some reasons it creates an unwanted line return. Is there a way to avoid this? Thank you.
No sorry, that’s unavoidable.
Hello, just bought the plugin, it seems fine with wide configuration settings easy to set. I use it for contact form, so when finishing filling all fields and pressing “Submit” button, the window close automatically, even if some required fields are not filled. If the user clicks the Contact button again, the pop-up window show him red marked fields that needed to fill. Off course, such messages will be not delivered.
Is it possible to keep the form up while user get the approval information, that his message was send successfully. If not, maybe it will be possible to stop the window close automatically, so user would see the message and close it manually.
Thanks.
That is only possible if the contact form is submitted with ajax (meaning the page doesn’t reload).
Hi,
I’ve installed your Sugar Modal plugin to add multiple modals to one page, but I’m running into a number of problems that I can’t seem to solve:
- I’ve added the modal code to images so that when a user clicks the image, a modal shows with an additional image and text.
- However, all modals appear double: one smaller sized modal overlaying a bigger sized modal
- Plus, the close button (x in the upper right corner) only works when clicked 10+ times.
Any idea what could be wrong?
Multiple different modals, or multiple of the same one?
I’m using multiple different modals. I see to have fixed the double occurence of the modals (one of my slugs was wrong), but the problem with the close buttons still persists.
Here’s the code I’m using:
[modal name="Heineken souvenirs"][/modal]
The modal is called “Heineken souvenirs”, the slug is “heineken-souvenirs”.
If you place [close]Click me[/close] inside of the modal, does it work?
love the sugar modal but could you advise as to how I make it mobile friendly, as on iphone it doesn’t fit to size, is there a way to do this so it automatically scrolls to size on phones.
You will have to tweak the CSS yourself.
Hi,
Is is possible to have the modal only close by using the close button? It seems that if the user clicks anywhere outside of the modal, the window disappears.
Thank you.
No, sorry.
Is it possible to use this to create a popup of an example webpage written in PHP or Javascript?
I teach PHP and Javascript and I’d like for my students to be able to click on an assignment and see an example of the finished assignment. So for my PHP class I’d like them to be able to click on an assignment where they create a form, and see the finished form in a modal window. Is tis possible or will the PHP conflict with WordPress?
And what about Javascript? Could I show JavaScript code examples in this modal window?
If not, is there some other plugin that you’d recommend?
Thanks!
No, sorry.
For some reason I cant seem to get the plugin to work. It also stops me from navigating to the visual tab on all pages and posts whilst activated.
What version of WordPress do you have?
When someone signs up for my email list, they are directed to the usual thank you page. Is there a way to call up a modal with the thank you rather than take them to another page? I like the idea of being able to keep them on the current page.
Thanks
Jacqueline
No, sorry.
Hello. Not sure if this question has been asked already, but can the buttons themselves be styled via CSS globally? We’d like to make the default button styles align more closely with our theme.
Yes you can!
Pippen:
Can you send a link to directions o how to do this? I need to send this on to our developers.
If your developer is comfortable with CSS, they won’t need any instructions at all.
Hello there,
Currently, I’m using sampression theme and I’d like to know whether it’s possibleor not to use this plugin to open post (including all the content of the post e.g. the image, the comment etc) in a modal window from homepage ( the idea is similar to pinterest ) without having to go to the post page?
Regards,
Tina
No it’s not, sorry.