Dialog pop up box - javascript

I would like to make register button, but when people click on it. A pop up dialog will appear and has two button for user to click. One is YES , One is NO. IF they select YES, will pass them to X page. Convert way, they select NO, will pass them to Y page. I search on google but only OK and cancel confirm.
YES --> VIP REGISTER
NO --> REGULAR REGISTER
Should i use Jquery?

You can use jQuery UI for this.
$('<div>', {text: 'Do you have VIP code?'}).dialog({
modal: true,
buttons: {
'Yes': function() {
window.location = ...;
},
'No': function() {
window.location = ...;
}
}
});
Note that this dialog box will by default include a "close" button and will also close automatically if you press escape. You need to either disable those features (see here for how), or decide what action to take (if any) when that happens.

You can do this in classic javascript
var answer = confirm ("Do you have vip code?")
and then treat the answer accordingly

You can use the built-in confirm method if you don't want to customise the look-and-feel of the dialog (you can't change anything, including the text of the buttons):
if (confirm("Do you have VIP code?")) {
//Yes!
} else {
//No
}
If you want to customise the dialog, look at the endless lightbox scripts that are available. As mentioned by #Alnitak, jQuery UI provides a good one.

jquery is a good way to do this very easy. But often the problem is, people belive they can use jQuery without understanding Javascript itself. So, first learn the basics of Javascript (for Example: Methodchaning, Closurs, Array-Handling, Prototyping) and after that try jQuery. The Box you want is very easy to do with jQuery-UI and
window.location = "vip.html";

Related

Remove a Leave button using javascript [duplicate]

I have the following beforeunload function which I have stolen from sonewhere else....
$().ready(function() {
$("#posManagerLoginForm").trigger("submit");
$(window).bind("beforeunload", function(){
window.setTimeout(function () {
window.location = "home.htm";
}, 0);
window.onbeforeunload = null; // necessary to prevent infinite loop that kills your browser
return "Press 'Stay On Page' to go to Reporting Manager home";
});
});
Regardless of what option I select I get navigated to home.htm. Is there a way that I can make the dialog box an ok button instead of the default "Leave Page" or "Stay on page" options?
Or perhaps someone else could make a suggestion on hot to better handle?
thanks
You cannot override the styling of the onbeforeunload dialog. Believe me, I tried this before in my earlier projects.
Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
It is built into the browser object, and you have no control over it.
You can however set your own dialog to show when the onbeforeunload event triggers, but it will not disable that the regular one will show. Quite annoying, yes.
The reason you're still getting redirected is because you're actually doing nothing to prevent it.
If you want to open an alert box before the form gets submitted, make sure the default behaviour is prevented (which is to submit the form), then redirect after OK has been clicked like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
alert("Press 'OK' to go to Reporting Manager home");
window.location = "home.htm";
});
});
Though not sure what the use of this would be. If you wanted to stay on the form if a different button is pressed (say 'Cancel' for example), then you'd rather want to use a 'confirm' like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
if confirm(("Press 'OK' to go to Reporting Manager home"))
window.location = "home.htm";
});
});
You could replace the alert or confirm with a custom dialog box too, depending on what library you're using. Just make sure you put window.location = "home.htm" inside the dialog's function, otherwise it will execute immediately.
As an example, you may want to have a look into jQuery UI's dialog here: https://jqueryui.com/dialog/

change font of alert in behind code

I used below code for showing message in my page
if (Session["Message"] != null)
{
//Write message code here
this.ClientScript.RegisterStartupScript(GetType(), "Javascript", "<script>alert('insert succesfullyا')</script>");
Session["Message"] = null;
}
I want this message show with (font=Tahoma font-size=12px and font-weight:bold )
How I can do it?
Nope, its not possible.
You have to use custom alert box.Using jQuery, here are some:
jAlert
jQuery UI dialog (with some tweaking)
This page proposes three alternatives to native alert/confirm/prompt
This answer shows a way to have a confirm-like blocking dialog using jquery ui dialog
Check this already answered SO Question: Change the styling of default alert box

How can I display a yes/no message box to the user in Javascript?

How can I display a yes/no message box to the user on the client-side in Javascript?
I don’t want to display “OK” and “Cancel” to the user, which is the default behavior of the confirm function in Javascript. Any help will be appreciated.
You can't amend the Ok/Cancel of the default confirm box, but you can use a 3rd party library (such as jQuery/jQuery UI) which will give you what you need: http://jqueryui.com/demos/dialog/#modal-confirmation
have a look at this jquery plugin http://www.84bytes.com/2008/06/02/jquery-modal-dialog-boxes/
jQuery UI has modal confirmation boxes
http://jqueryui.com/demos/dialog/#modal-confirmation
I just posted in my blog an easy to use Yes/No message box that you can easily modify to fit your project.
Example:
SmallJS.message.modal('Do you want to click yes?', {
buttons: {
ok: 'Yes',
cancel:'No'
},
onOK: function () {
SmallJS.message.show('Yes sir!', { animate:false});
}
})
You can see the source code at: http://www.waltersoto.com/javascript/javascript-yes-no-message-box

I need to ask my web site's user a Yes/ No question. in javaScript

I need to ask my web site's user a Yes/ No question. Currently I use JavaScript's confirm() function.
The return value is true (OK) or false (CANCEL).
The word CANCEL is misleading. I want to have the buttons say Yes/ No instead.
How can I do it? i m using php..Code should run on both IE & Firefox
With HTML:
<div id="yesNo">
<p>Press Yes or No</p>
</div>
and jQuery:
$('#yesNo').dialog({
modal: true,
buttons: {
"Yes": function() { alert("Yes"); }
"No": function() { alert("No"); }
}
});
Or use standard confirm dialog (but it will have Ok, Cancel buttons):
if (confirm("Are you sure?")) {
alert("Yes");
} else {
alert("No");
}
How about using a JQuery dialog?
If you truly cannot rephrase the question as OK/Cancel, then you will need to create your own dialog in a div or something and 'pop it up' to the user. (You could also create a dialog as a page and then use a popup window to display it as a real native OS modal dialog, but this is perhaps more annoying.)
Unfortunately, javascript's browser built in dialogs are pretty limited.
Use something like jQuery UI. It has a nice dialog (including modal). As well as it have many other nice feature you may need in your webapp.
Of course you can paraphrase your question for OK/Cancel answer. But i think UI library is your friend.

How can I implement a confirmation dialog for critical action?

Im not proficient in JS myself very much, so it would probably take me a few hours to figure this out myself, so I figured I'd ask you guys.
I have Delete/Ban links on my site, that are used by admins to moderate the users and what they post. Since these links have such drastic consequences on the site's content I would want to have some sort of confirmation that would popup when one of the links is clicked.
It should have some extra text explaining what's about to happen, and OK/Cancel buttons.
So I have a link, for example like this:
Ban John
Delete Post
When this link is clicked, the code needs to be triggered. If OK is pressed, it goes to ban.php?id=123, if Cancel is pressed, it doesn't go anywhere.
A simple JS dialog box, will do. Or if you have a link for a fancy jquery powered box, you can point me towards that also.
Thanks!
Easiest way to achieve this is to use the confirm() function:
var confirmed = confirm('Do you really want to do this?');
if(confirmed) {
//Do dangerous action
}
It basically displays a box with the text you provide and ok and cancel buttons.
With a link you can do something like this:
<a href="someurl" onclick="return confirm('Are you sure?');">
It's not best possible practices to put the action in the onclick like that, but it works and is simple to understand even if you're not a pro javascripter
I think you're looking for something like "confirm delete".
The Confirm function takes as an input a string parameter. It displays a dialog box whose message is that parameter, with OK and Cancel buttons.
If the user clicks OK, the confirm function returns True; if the user clicks Cancel False is returned.
Here's an example of using it:
function fConfirmDelete()
{
if(confirm("Delete Field?"))
{
document.forms[0].lblFieldSelect.value="DELETE";
document.forms[0].submit();
}
else
{
document.forms[0].lblFieldSelect.value="";
}
return;
}
Here's a decent jQuery dialog plugin. Of course, you will need jQuery too.
http://nadiana.com/jquery-confirm-plugin
var confirm = confirm('Blabla');
if(confirm)
{
// do
}
This is plain JS:
<a href="delete.do"
onClick="return confirm('Delete. Are you sure?');">Delete</a>
Looking for this?
//Cleaner explanation
$("document").ready(function(){
$(".dangerousLink").each(function(){
var confirmUrl = $(this).attr('href');
$(this).attr('href', 'javascript:;');
$(this).click(function(){
if(confirm("This is dangerous... are you sure?")) {
window.location = confirmUrl;
}
});
});
});
//Now just append a class dangerousLink to all links that you want confirmation
Blow up
If you are looking for a fancy dialog, you'll find something interesting here.

Categories