How to make the Background behind Alert Box clickable? - javascript

I have a application where i make all Divs clickable by using this code :
$("html").click(function(){
alert("Click");
return false;
});
This one work normally for all divs. Well, when Alert popup, the Background behind alert box cannot be clicked. How can i turn that to be clickable too?
PS: Right Click on the Background dont work too.

Thats not possible. You have to use a JS plugin doing the alert, so you can influence the behaviour (like the jquery ui modal widget, mentioned here). But with the browser alert this is not possible, as far as i know.

Not sure how to do exactly what you're asking (if it's possible). Maybe someone else can shed some light on that.
But a solution you could look into would be the dialog widget from jQuery UI. You can easily create pop-ups, modal or non-modal (meaning with the background faded out or not).
http://jqueryui.com/dialog/
They have some demos there, but it's as simple as created a div with some text and calling...
$("#the_div_id").dialog();
Other config parameters can be found from the API:
http://api.jqueryui.com/dialog/

By default its modal popup behaviour ,If you want to clickable
Assuming you are using Jquery Ui dialog
Try with the option modal
$('#selector').dialog("option","modal",false);
http://api.jqueryui.com/dialog/#option-modal

Related

Adding DIV's inside modal dialog HTML5

I tried to google but didnt find exactly I am looking for.
I need a sample example code or a resource link to create a modal dialog box and I want to have two boxes(div's) inside the dialog box.
I have to insert different content inside both the boxes(inside the dialog box) when the user clicks.
I know how to create a dialog box but, I would like to particularly know how to insert divs inside it.
I hope my question is clear. Please help.
If you just want to look at the code have a look at the work section of http://www.pixelvalet.com (ok! its my website but then it would help you right?).
The way i approached the issue is:
first i added the template (all the empty divs i needed which i would be populating later on) in the main html file itself
next i gave it a hidden css style to the parent which contained all the divs.
then i added a logic which would tell the browser the which link was clicked and then it would populate the divs in the template appropriately using ajax
it would then slowly fade in using jQuery
but then this isnt the only way you might do this. There are tons of plugins out there which help you create a modal box. but i opted for this route because i wanted it completely customised.
hope it helps.
I have used bootstrap modal for dialog box it works great you check it here:
http://getbootstrap.com/javascript/#modals
The basic idea is just put your dialog box code at bottom of you page,
<div id="my_dialog">
content
</div>
And you detach it in your jquery or other framework you are using or just pure js.
In jquery you can do this:
var my_dialog = $( "#my_dialog" ).detach();
now when ever you need to show it you just attach it to where you want to show it.
and before you attach it you can insert any content you want.
But I would suggest you to use bootstrap's modal much easier.

How to custmize & Design the `alert()` box?

Here is script in my website's footer that will check that specific font installed or not in computer. If installed or not it will prompt alert box. I want to customize:
Design of that alert box
Replace the 'OK' button with 'Download' button that also have download link.
Write some RTL words in new paragraph. For Example Urdu words like آپ کے کمپیوٹر میں۔۔۔۔
Just accept that it's not going to be an alert() box, but rather it's just going to be normal HTML+CSS. So you will just position the box wherever you want it with whatever buttons you want and whatever way you want it to look. Or if so you'd whish their are plugins which already do this for you (though they limit your options quite a bit of course). You might want to look at jQuery UI if you're using jquery for example (specifically the dialog component of jQuery UI).
you have to use jquery dialog box for this type of customization. Use this link
I use Sweetalert for designing the Alert box. its easy, simple and efficient.
here is the link to download SweetAlert and example codes worked out at Here

Is there a way to have multiple dialog boxes with Twitter-Bootstrap?

I am using Twitter Bootstrap for everything and it's great but am at the point where I need multiple dialog boxes on the screen. I have not been able to find in the documentation how to do this so I'm assuming it is not something that is included.
I'm looking for something similar to jQuery-UI dialog boxes (NOT modals)
Is there a way to achieve this with Twitter Bootstrap without writing a new piece of code?
There is not problem in doing so. I've a project where it is working fine. There is one 'glitch' the backdrop is stacked so the backdrop (if you use it) of the first dialog is leading and for every dialog one gets stacked on top of it. The dialog you opened first is not greyed out. So probable you want to load you dialog with .modal("show", {backdrop: false}) after the first one and if possible you want your dialogs to be of the same size or bigger then the previously opened dialogs to circumvent the problem.
In our case it's an internal application, so this is not a big issue. But for a public website I could imagine this is a showstopper.

Change name of alert in jscript

Is there a way to change the name of a alert dialog box in jscript, like instead of it saying ("Alert" "Message") can it say something like ("Hello" "Message") this is the script im using:
Click Here
Thanks :D
If you want to alias alert it would be:
var t = alert;
t('blah');
If you want to change the text of the alert box's title bar, you can not.
Not as far as I am aware with the default basic Javascript alert() dialog box.
In fact, different browsers will have different title bars on the dialog. Some have "Alert", others have "The page at http://someurl.com says:" and it goes on.
A far prettier, and more customisable option is to consider using something like jQuery UI. It has features like the dialog, which create a nicer, in-page dialog box with customisable buttons, title, and content.
It requires use of the jQuery library, which is a hugely popular Javascript library to greatly ease Javascript development, and plainly, make it more fun.
The best way to implement an alert with a custom title, would be to implement a custom dialog. You may want to look in to using jQuery UI Dialogs. There are many other implementations of custom Dialog controls. Such as SimpleModal Dialog.
The short answer is: no.
However, alert is a host method and browsers can chose to implement it however they like. But all browsers currently do not let script modify the standard alert dialogue. You can create your own alert dialogue though using a suitably styled and positioned element.
If you mean function renaming
<script type="text/javascript">
function hello(msg){
alert(msg);
}
</script>
Click Here

How to make a jquery popup menu

I am trying to make a Login popup window. For example, if someone clicked the login button a popup window will show and it will change the opacity of the main page and give focus to the popup window.
Here is an example of a web site that utilizes what I want to implement.
You can use the jquery dialog referenced in your post for this.
Here is an example of how to create form elements on it.
you could use jqueryUI dialog
you could also use the jQuery BlockUI plugin:
http://plugins.jquery.com/project/blockUI
I've used the Boxy plugin before, it's very lightweight (lighter than JQueryUI, although not as much functionality).
It's very easy to use, it was the first plugin I used when learning jQuery.
http://jqueryui.com/dialog/#modal-form
use this site link
Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

Categories

Resources