Display 2 modal windows with jQuery - javascript

I want to display 2 modal windows containing HTML content with jQuery.
But second modal window must be within the first.
So, here is main page, when I click link it opens first modal window, and then when I click a link in this modal window in opens second modal window.
I tried to do this with qTip, but I can't make second modal window.
I will be appreciate if somebody tells me how can I realize this. Thanks.

To me this sounds like an ui failure - modals within modals are not healthy for a user interface, and thus modal frameworks rarely support it.
If i was you I'd find another design rather than solve this problem programatically

I'd recommend the jQuery UI Modal Dialog, it should allow having two dialogs open at the same time.

qTip allows to open modal in modal.
Something is going wrong with your code.
Post it here and i can give you a solution!

Related

Calling a JavaScript function on a CKeditor dialog instead of a popup window

I currently have a custom dialog within the link plugin that launches a popup with all the internal pages on my CMS for the user to pick and it inputs the url into the box
{type:'button',id:'browseInternal',label:i.browseWebsite,filebrowser:{action:'Browse',url:'/admin/pages/links'}}
However, I now use a popup modal window all over my system and would like the same modal style window to be used here. Any ideas on how I can implement it? I dont want to launch a popup window but instead the button needs to call this function
loadPopup( '/admin/pages/links', '', 'destination' );
After gathering my thoughts and a little more help from Google I eventially found the right page on the CKeditor docs see here

What is the difference between a modal window and a dialogue window?

The question describes exactly what i want to know . What is the difference between a modal window and a dialogue. When a modal window becomes a dialogue and vice versa ? How do i go about achieving both ? A nudge in the right direction will be very much appreciated .
A modal window is a windows that runs on top of an application, so that you can't do anything at all with the applciation until you have closed the modal window.
A jQuery dialog is not a separate window, so technically it can't be a modal window. It can however emulate most of what a modal window does, by putting an overlay element over the rest of the page so that you can't interact with it.
A modal window will not let you continue until you close it.
There are two main categories of temporary windows in IxD:
Modless and Modal
Modless: that dont require users to exit out to access the behind layers - like tooltip, select, popover (non-sticky), menu etc. These dont have the overlay and you can see all the behind layers as-is.
Modals: that require users to take an action before they can access the behind layers - like dialog (a,k,a alert dialog), slide-in-panel, bottom-sheet (new in mobile), popover (skicky). These are mostly required to have the overlay to afford that this is not letting you access the behind layer till you get rid of this.
Visually -- shadows should be reserved for these two in the UI

How can I display two colorboxes (popup windows)?

I am using this jQuery plugin http://jacklmoore.com/colorbox/ to show a popup window. There is a link in the content of the first popup clicking on which triggers another small popup window. I'd like to have this second popup without closing the first one. Is it possible to achieve this without changing much in the plugin?
There would be no way to do that without significantly altering the plugin. Sorry.
Assuming you have the chops, consider using ColorBox with the html parameter for the first popup window. In the HTML, develop your own window, eventing and handler (with Jquery). Just a thought.

What is it called when a popup appear "over" a wepage?

when you visit http://www.daniweb.com you get a popup window, what is this called + any idea how to do it?
Thank you for your reply, what is the simplest way to do have a modal loading animation only i.e. when page loads that animations shows and when done the animation goes? ASP.NET/Ajax
You'd call this a modal dialog, and you can implement one very easy with jquery ui:
http://jqueryui.com/demos/dialog/#modal
I like to refer to these windows as ANNOYING
The other name is some form of JS or JQuery.
Its called a javascript popup window.
Here's a link to show you how to open a js window
The way it looks though is they are using the modal popup extender provided by the ASP.net AJAX Control library. This can be simulated via JQuery as well.
It's called a modal dialog window. "Modal" meaning "mode" as in the UI has two modes, one where you can only interact with the dialog window, the other where there is no dialog window and you can interact with the rest of the page.
Probably looks something like a lightbox/thickbox .Showing some text/html instead of images
This is a modal pop up window, meaning you can't do anything else while that window is open.
Here are a bunch of ways to make them.
You can set up this kind of popup by having Javascript on the onload event create an overlay div that has height 100% and a higher z-index than the content, and also a div for the popup with position fixed and an even higher z-index. Then when the user clicks on close or otherwise it is time for the popup to go away, the Javascript can set display: none on these divs.
You can use Firebug (or IE Developer toolbar) to see the styles used on the example page you mentioned and use that as a model.
(Also they are annoying, but at least better than pop-unders, IMO ;-) )
Thats a modal dialog popup. Here's a nice jQuery version that I have used before.

popup inside the same page

I need to show a page of contents inside my page.
ie; when i click on a link it will show 2 paragraphs inside a div as popup in the same page.
that popup must have a close button in it to close that div popup.
Is any one have an idea or code to help me in this
Thanks.
You could use something like a jQuery modal dialogue box:
Thickbox - apparently no longer maintained.
jQuery UI, recommended by those behind Thickbox.
jqModal
BlockUI
Facebox, which looks much as you'd expect, from the name...
Use hide properties for your div tag.
For hiding
document.getElementById('divid').style.display='none';
For displaying
document.getElementById('divid').style.display='block';

Categories

Resources