I have a page where if user click anywhere outside form or try to close the tab a dialog box/popup should come like your changes will be discard or do you want to move.
I can do this from window.onbeforeunload event but the problem is that i need to use a customized pretty dialog box instead of default one if any alternate approach is there.
If we use any modal dialog box but i don't know which event to call on that dialog also tried window.onload but it not fulfill my problem as i need to ask the viewer before moving to other page.
Related
This is a minor, subtle point, but in UX, subtlety makes all the difference.
I have crafted a 1-page web app using Twitter bootstrap. In one particularly important part of my application...
My user takes an action,
I present a Confirmation dialog (technically a bootbox confirm)
The user clicks OK to confirm
the modal disappears, an action via ajax takes place,
then I display a secondary modal (bootbox dialog) with a success message.
What I am trying to do is change step 4. I don't want the darkened overlay to disappear, only the dialog box itself. Instead, I would like to leave the background dimmed and display a spinner (spin.js of course) that will be replaced by the success modal upon ajax completion.
In short, I think I may need to override the default behavior of the success method of bootbox confirm.
Is this possible?
It should work if you listen for the close event on the first modal
$(document).on('close', '#firstModalId', function(){
$('#secondModalId').modal('show');
});
You can also try the closed event. If timed right the user shouldn't see both at the same time and they shouldn't see one disappear when the other opens. Be careful of crashing IE when using two bootstrap modals at the same time.
One other possibility I've used is to open the second modal without a backdrop and at the same time changing the z-index of the first modal so it looks like it's gone. When the second modal closes you can either return the first modal to its original z-index or close it like normal. Whether you can take this route depends on whether or not you want the backdrop click behavior in the second modal.
Currently the functionality in my asp.net project is as follows:
A user controls is opened in showmodaldialog. The user does some functionality. But as the showmodaldialog is an window, it has close(x) button. Upon clicking of this close(x) button I have written window.onbeforeunload function which displays a message to user as a warning. And asks him to click on either on OK or Cancel buttons which are default in confirmation box that is shown in window.onbeforeunload.
But now I want to replace this functionality with something better. I want to display my own custom dialog with custom buttons with their own custom functionality.
Basically I want to make sure that once user starts the functionality in the user control, he should finish it and if he clicks on close(x) button he is to be shown my new custom dialog and need to prevent him from closing showmodaldialog.
Can anyone please suggest something which I can use in my situation?
Thank you.
Sorry for the title couldn't come with a better one...Okay here's is my doubt, when we display a javascript alert using alert("Some text") we see the alert dialog , Now the enter UI except the dialog box is unresponsive unless we hit Ok or close the alert window, Same goes for the confirm dialog. I am trying to build a widget to display my custom Confirm dialog using HTML elements but I don't know how to block the UI, The user if he wants can ignore the dialog & click other elements on the UI, Any suggestions or workarounds on blocking?
You could build a simple overlay with your dialog. Your dialog could be absolutely positioned on the screen, allowing users to either click it or other elments to the side of it.
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
I'm not sure I've diagnosed this problem correctly.
I have a jquery dialogue that pops up another jquery dialog. When I pop up the inner dialog
once everything seems to work. when I close both dialogues and reopen them the "save" button on the
inner dialogue does not work right -- in particular it doesn't close the dialog.
What I think is happening: The second time the content for the second dialogue is reloaded
via AJAX using the same DOM id's as the first time, and when jquery tries to close the dialogue
it tries to close the "old" dialogue which no longer exists (or at least is not visible).
Am I right? If so how to get jquery to forget the old element and use the new one?
If you want to see the problem yourself:
go to http://ibidreview.appspot.com/Teach/Edit?eid=1DemoE&owner=
click the first "change question" button. First dialog should show.
click the "html" pseudo-link. Second dialog should show.
click "save" on inner dialog. Inner dialog should close
click "change" on first dialog. First dialog should close.
Now repeat steps 2,3,4 and notice that on step 4 the inner dialog does not close.
I will stop trying to fix this for a while so the steps will work the same... Thanks in advance!
Take a look at the live() event handler. This will ensure that the element will still fire the event after being destroyed or recreated. http://api.jquery.com/live/
Use something like this:
$(button).live('click', function() {
$(form).save(); //save the form
$(menu).close(); //close the menu
});
I have the following usecase:
A div with some buttons
When the user
clicks on a button, a popup is shown
and the background div is faded out
to 0.5 opacity
The problem is that when the popup comes in, the user is still able to click on the background buttons. At this point, I can remove the entire DIV temporarily but I don't want to do that. Is there anyway I can disable all the previously attached events and then add event handlers ONLY to the current popup? (I mean something like a close button should still work on a popup) Any suggestions?
Sounds like you need a modal popup. There are numerous jQuery plugins that do that, or you can check out this tutorial.
You could store each element with an attached event into an array, then loop through them and unbind() them. Upon closing the popup you can re-bind() them.
You can use the modal dialog option built into JQuery UI
http://jqueryui.com/demos/dialog/#modal
$("#dialog-modal").dialog({
modal: true
});