Is there anyway to create an alert box, but with a more modern style? When an alert box is issued, the user can not use the browser until it is acknowledged (enter key or click OK). I would like to lock the browser in the same fashion, however use a custom made, better looking alert box. Is this possible with javascript?
Thanks
Edit: To clarify, by lock the browser I mean unable to change url, open new tab etc. The user needs to confirm before they can switch to another page
Yes. The kind of dialog you're referring to is a modal dialog. The basic principle of implementation is to simply cover the rest of the elements on the page with another element to render them unclickable.
Simply googling "javascript modal dialog" reveals a wealth of information; I could not hope to provide a comprehensive explanation in this small space.
[edited -Nickolay] Such dialog won't block further JavaScript execution as alert() does though, and it won't prevent the user from accessing the rest of the browser (other tabs and the Location bar). It's a good thing the user can continue to use the browser and it's one of the reasons such page-modal dialogs were created.
Yes, they are called "modal dialogs". JQuery has an excellent dialog widget that can be made modal as part of its JQueryUI library that can host just about any type of content, including forms.
See this one
Dialog
using jQuery
or
jQuery Alert Dialogs (Alert, Confirm, & Prompt Replacements)
Edit
To your edit: I don't think by using javascript you can prevent the user from typing it to the url bar or opening a new tab. And do avoid doing these sort of things that make a user hinder his normal action.
No, I don't think modal dialogs solves his question.(Not that I have a solution for this, but just to express my opinion). When you use modal dialogs, the only controls you can't access are those inside the web page but the controls of the browser can very well be accessed (ie. Menus, address bar);
This is not possible in javascript. You may use facebox-like containers, that simulates modal behavior, but there are not native modal, i.e. javascript code will not stop execution, when "modal window" is appear.
Related
I am building a MMO which has a tutorial in it.
When the user tries to navigate away from the tutorial or close the tab/browser while on the tutorial, I need to show a custom popup which has a options as to why the person is quitting the tutorial.
I am familiar with the onbeforeunload event but my requirement is to display the custom popup instead of the browser default popup as it can't be customized other than changing the text message.
Is there any way I can hide the browser popup and show my custom popup instead.
I'd really suggest you use jQuery UI for this. It'll make your life much easier and has modal dialogs built into the API. See here: http://jqueryui.com/dialog/#modal
OK, what I said before was totally wrong. Must have been tired.
You can't override the onbeforeunload because of the way it fires in the DOM. This is a good SO explaining it.
How can I override the OnBeforeUnload dialog and replace it with my own?
I want a popup screen to show the user that "this part" or "that part" of my app is loading....A lot of things within my app is referenced content so sometimes it takes a sec to load...
I'm new to Ajax (so pardon me, please), but I want a popup window to appear to the user in Ajax or JavaScript to let the user know the app is "loading" when the user finger taps something that needs to load....For example content on the new screen....I hope I'm making sense here.... I don't know where to start when it comes to making this happen (cause I'm not a code warrior yet, still a bit green sry lol), so any help is appreciated. I'm using JavaScript and HTML5 so far, but I need a popup loading window widget...
You're probably looking for something along the lines of colorbox.js (http://www.jacklmoore.com/colorbox). In more general terms, what you're looking for is a modal dialog box. Modal dialog boxes can be contrasted with more basic dialog boxes that don't grey out the rest of the screen. jQuery UI includes such a dialog, which you can see here: http://jqueryui.com/demos/dialog/
Of course, these aren't going to give you a loading effect out of the box. You'll have to write code to check whatever loading conditions pertain to your app, then dismiss the dialog box. A very simple way to do this would be to use setTimeout in conjunction with an ajax call whose success handler dismisses the dialog box. Or, if you don't have a way to track your loading status, you could just use a simple dialog to prompt the user to wait (but that's not particularly nice for the user).
I have used popup at many places in my website (its in PHP with Mysql DB and lots of javascript). These are mostly been blocked my browsers, which restricts user to move ahead. what should do in my code so that my popups becomes Popyp blocker independent..
Use Jquery Dialogs http://jqueryui.com/demos/dialog/ they are purely javascript and so popup blockers will not block this
Make sure your popups's URL is on the same domain as the main site. Using a link with 'target="_blank"' will never get blocked unless it was manually blocked as the user did the action himself. Switch to alerts and prompts instead of popups.
Not a direct answer but may be Floating div is a good replacement. Build a js dialog box.
I need to open a popup Window to a cross domain content. I should not allow the user either to access or close the parent window, till i am done with Child window.
The main issue with Modal window is that stops any asynchrnous process running on the main window. For example, timers and auto refresh wont be working in the parent window.
Is there any perfect way to do the above said.
Thanks in advance
How about instead of popping up an actual window, you just open a pseudo-window...that is a div with some borders, make it draggable if you want, and place a large semi-transparent div that covers the rest of the page and blocks it from being clicked on. Basically do something like how Lightbox works
You could use a fake window built via javascript. Several widget libraries have support for this. For example, see ExtJS, which also supports modal windows but it might be overkill for your application. For jQuery, browse through the plugins, like this one
I think Telerik has a control for this if you are working on ASP.Net. Uses a div in its implementation as #Davr suggested. Modal windows are a bad option anyhow as they are not supported on all browsers.
In addition to what Davr and thoriann said, you will likely need to make an Ajax call to grab the content. Since Ajax calls via the browser enforce the same-domain policy, you will need to make an Ajax call to your OWN server, which in-turn will need to make an xmlhttp sever-to-server request to grab the content the third-party server.
I feel the above answers wont fit for the following reasons..
JasonS Solution - The application is developed on J2EE technologies.
Other's solution - Some of the the URL Launched in the child window will communicate to the parent window through standard APIs. If i am using div or other in-built plug-in windows, then those javascript API will fail.
Check out the Jquery plug in "BlockUI". When BlockUI is called the parent window is not accessable. You can do what you want on the modal then call "UnblockUI" to close the popup and give parent control again.
Pete
I would like to put a link to a webpage in an alert dialog box so that I can give a more detailed description of how to fix the error that makes the dialog box get created.
How can I make the dialog box show something like this:
There was an error. Go to this page to fix it.
wwww.TheWebPageToFix.com
Thanks.
You can't. Alert boxes don't support html. You should display the error as part of the page, it's nicer than JS alerts anyway.
You can't - but here are some options:
window.open() - make your own dialog
Use prompt() and instruct the user to copy the url
Use JavaScript to just navigate them to the url directly (maybe after using confirm() to ask them)
Include a div on your page with a [FIX IT] button and unhide it
Use JavaScript to put a fix it URL into the user's clipboard (not recommended)
If you really wanted to, you could override the default behavior of the alert() function. Not saying you should do this.
Here's an example that uses the YUI library, but you don't have to use YUI to do it:
YUI-based alert box - replace your ugly JavaScript alert box
You could try asking them if they wish to visit via window.prompt:
if(window.prompt('Do you wish to visit the following website?','http://www.google.ca'))
location.href='http://www.google.ca/';
Also, Internet Explorer supports modal dialogs so you could try showing one of those:
if (window.showModalDialog)
window.showModalDialog("mypage.html","popup","dialogWidth:255px;dialogHeight:250px");
else
window.open("mypage.html","name","height=255,width=250,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,modal=yes");
Or use window.open and put the link there.
Even if you could, alert() boxes are generally modal - so any page opened from one would have to open in a new window. Annoying!
alert("There was an error. Got to this page to fix it.\nwww.TheWebPageToFix.com");
That's the best you can do from a JavaScript alert(). Your alternative option is to try and open a new tiny window that looks like a dialog. With IE you can open it modal.