Block rest of the view except a particular element - javascript

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/

Related

onbeforeunload change the UI of dialog box or use custom

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.

Is there a way to customize the alert box generated by onbeforeunload?

I have a page with text editor that I want to make sure the user knows that the edits they make will be lost before they actually leave. I have done event.preventDefault() for all links in my page and add my own version of alert box (or to be precise, div that looks like alert box), but for leaving by pressing last page, clicking on a bookmark or typing URL directly, I can only use the ugly default alert box.
Is there a way to customize the alert box on leaving?

How to show Confirm Dialog Box always remains on top of any application?

I am doing one web application in PHP.
I am showing one JavaScript confirm dialog-box on window focus-out event but i want it to remains always on top of the screen and without responding to confirm dialog box user can not open any windows application or any other browser tab.
I am doing time calculation based on the confirm dialog box response.
Be more precise why you are trying to achive this and why. User can prevent javascript from executing in his browser, it is bad use it for these kind of security checks. User can also click on x button and not to confirm.

How can I allow scrolling of the background when the 'confirm' box pops up?

Using a Chrome extension in the browser, I allow the user to select a bunch of text to submit to the database. When the user hits enter, a confirm box pops up, but before the user hits 'OK' to submit, I want the user to be able to scroll in the background and double check everything that he's submitting. Is there anyway to make the background scroll while the confirm window is in focus?
You need to initialize the JQ dialog with modal set to false
Official doco on how it works is here: http://api.jqueryui.com/dialog/#option-modal
Provided that the text/fields/data to be submitted isn't huge, you should also consider jasonscript's idea of presenting the data in the popup. From what you're saying though, it's more important to show what they might have MISSED, not just what they included. Perhaps an on the fly screenshot of the webpage at the point they opened the submission form? That would show their selection clearly.

A replacement for window.onbeforeunload in javascript or jquery

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.

Categories