Besides window.alert(),window.confirm() and window.prompt(), is it possible to create custom popup decision?
For example: When you write a comment on facebook and try to close the window, a popup appears and its buttons are Leave and Stay.
Yes, check out bootstrap modals
http://getbootstrap.com/javascript/#modals
There are other css frameworks and libraries that implement modals as well. Essentially these are just divs that have a higher z-index than the rest of the page with some buttons on them. Because of this they are completely customizable.
Related
I'm using a modal box to display my advertising work for my portfolio. The modals are functioning properly for the most part, but it seems like the content within the modals is blocking my navbar at the top.
Without dynamically loading the content, is there a way to make the content of the modals not interfere with the navbar? I tried giving the navbar a higher z-index, but that didn't seem to do the trick. I gave the modal content as well as the modal.backdrop a lower z-index, but nothing seems to be doing the trick.
Here is a link to the page: http://0034191.netsolhost.com/ryancurtis/advertising.html
This might by an easy fix, but I've tried everything within my skill set. I'm pretty new to bootstrap.
Don't make the dialog modal. You can still pop-up the dialog, but don't make it modal. Modal prevents the user from seeing/interacting with what lies beneath.
It's easier to see the distinction via this example from the jQueryUI dialog (a very similar system).
I'm not fluent with bootstrap, but it appears that you would make your dialog an alert rather than a model.
Note that you can mix/intermingle bootstrap with jQueryUI if you wished to do so. They both run on top of jQuery, just include both libraries.
why dont u give padding/top margin for modal?
i guess its simplest solution..
<style>
.modal {
margin-top:50px;
}
</style>
or with JS
<script>
{
$("#myModal").animate({"width":"1100px","left":"30%"},3000,'easeInCirc');
}
</script>
I am working on a project where it would be easier for users to quickly add transactions.
I am very much interested to do something similar to what gmail compose pop up does on the single page
I have no idea how to implement such a thing. Please give me directions about how to do such things
I am interested in building it using AngularJS
P.S Sorry for a broad question, but I really don't know what this is called and don't know what to Google for either
You can construct a popup like that very easily using a regular div element and some CSS. In particular, the position: fixed CSS property will let you put something at a position on the window, no matter how it scrolls.
Here is a simple JSFiddle that demonstrates the technique: http://jsfiddle.net/BinaryMuse/ndr2Q/
You can click the titles of the books to expand their description, which will hopefully make the preview window tall enough to scroll. (If not, just resize the window.) No matter where in the document you scroll, the "popup" window (which is just a regular element with an ng-show and some CSS) stays at the bottom-right of the screen.
You can find libraries, like Bootstrap, that present jQuery plugins to allow you to do popups on the page, but in general they're designed to prevent the user from interacting with the page behind the modal in any useful way. A technique like this allows you to scroll around and use the page in the background similar to Gmail's interface.
Dockmodal is a Gmail like dockable modal plugin that has the option to minimize and restore opened modal dialogs.
Check out these angular JS alerts based on bootstrap:
http://mgcrea.github.io/angular-strap/#/alerts
You can use the provided $modal service that takes a template URL as well :
var modal = $modal({template: '/js/app/views/elements/modal-welcome.html', show: true, backdrop: 'static'});
And shows it up as a popup.
I'm using the jQueryUI (extension?) and have a simple overlay on a page. Here's what I have so far
Anyway is there any built in way to grey out the screen when the dialog is open? I know you can do this by appending another div to the page, I want to know if jQueryUI has something like this built in.
I couldn't find anything like this on the API, maybe I missed something.
You can specify options for the dialog using an object literal. One of these options is modal which will place an overlay on the screen behind the dialog. This overlay will prevent the user from clicking behind the dialog.
$('#over').dialog({modal:true});
Example: http://jsfiddle.net/vhA2w/1/
Checkout all of the available options at: http://jqueryui.com/demos/dialog/
This jsfiddle should work for you
$('#over').dialog({ modal: true });
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!
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.