SmashAndGrab
asked on
Show confirmation alert in Jquery
Hi,
I use a simple Jquery overlay with an onclose function.
I would like to running the " location.reload();" I would like to confrim with the user that that is ok.
I used to use a "RETURN CONFIRM" in javascript but am not sure how to do this in Jquery?
I use a simple Jquery overlay with an onclose function.
$('#Email_popup').popup({
onclose: function () {
location.reload();
}
});
I would like to running the " location.reload();" I would like to confrim with the user that that is ok.
I used to use a "RETURN CONFIRM" in javascript but am not sure how to do this in Jquery?
ASKER
Thanks - Not sure if I have explained what I want very well :)
He's the sort of thing I am looking for..
$('#Email_popup').popup({
onclose: function () {
//The user has clicked to close the popup
//Ask the user if they are sure thats what they want to do?
if UserAnswer =YES then
location.reload();
else
//do nothing
end
}
});
He's the sort of thing I am looking for..
$('#Email_popup').popup({
onclose: function () {
//The user has clicked to close the popup
//Ask the user if they are sure thats what they want to do?
if UserAnswer =YES then
location.reload();
else
//do nothing
end
}
});
Nope, you explained it perfectly well, I was just offering another approach you can take using a jquery plugin that does the heavy lifting for you.
if you don't want to use that approach, you need to offer a little more info. how do you want to display the confirmation message? should it be another modal window? or maybe you want to display the message text in the current modal window (say, in an empty DIV). Or you could also use a good old fashion javascript confirmation box.
If you can provide more info, that would be helpful. I still suggest using bootbox though, only because I've had a lot of success (and time saved) using it
if you don't want to use that approach, you need to offer a little more info. how do you want to display the confirmation message? should it be another modal window? or maybe you want to display the message text in the current modal window (say, in an empty DIV). Or you could also use a good old fashion javascript confirmation box.
If you can provide more info, that would be helpful. I still suggest using bootbox though, only because I've had a lot of success (and time saved) using it
ASKER
ok - thanks - I just wanted to check as I often do not explain my questions very well :)
This is literally the last bit of work left of this particular project and it all works well. I was after something very simple (quick and dirty!).
Would rather not introduce any more jquery libraries now and just use what I have already.
I've had a look at the bootbox and it looks great, so I will definatly be using that for my next project.
This is literally the last bit of work left of this particular project and it all works well. I was after something very simple (quick and dirty!).
Would rather not introduce any more jquery libraries now and just use what I have already.
I've had a look at the bootbox and it looks great, so I will definatly be using that for my next project.
if you can provide info on how you want it to look, I may be able to come up with a solution. Would a simple confirmation box work for you, or do you want something more elegant?
Here is an example of how to do this. Responsive confirmation box using HTML, CSS, jQuery and Promises
CSS
Full discussion of the code in this article https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html
CSS
.overlay {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.85);
z-index: 10000;
}
.popup {
width: 98%;
padding: 15px;
left: 0;
margin-left: 1%;
border: 1px solid #ccc;
border-radius: 10px;
background: white;
position: absolute;
top: -100%;
box-shadow: 5px 5px 5px #000;
z-index: 10001;
}
@media (min-width: 768px) {
.popup {
width: 66.66666666%;
margin-left: 16.666666%;
}
}
@media (min-width: 992px) {
.popup {
width: 50%;
margin-left: 25%;
}
}
@media (min-width: 1200px) {
.popup {
width: 33.33333%;
margin-left: 33.33333%;
}
}
jQuery<script>
function showPrompt(msg)
{
// CREATE A Promise TO RETURN
var p = new Promise(function(resolve, reject) {;
var dialog = $('<div/>', {class: 'popup'})
.append(
$('<p/>').html(msg)
)
.append(
$('<div/>', {class: 'text-right'})
.append($('<button/>', {class: 'btn btn-cancel'}).html('Cancel').on('click', function() {
$('.overlay').remove();
// RESOLVE Promise TO false
resolve(false);
}))
.append($('<button/>', {class: 'btn btn-primary'}).html('Ok').on('click', function() {
$('.overlay').remove();
// RESOLVE Promise TO true
resolve(true);
}))
);
var overlay = $('<div/>', {class: 'overlay'})
.append(dialog);
$('body').append(overlay);
$(dialog).animate({top: '15%'}, 1000);
});
// RETURN THE Promise
return p;
}
$(function() {
// HANDLE open-dialog CLICK
$('.open-dialog').on('click',function(e) {
// PREVENT DEFAULT BEHAVIOUR FOR <a/>
e.preventDefault();
// SAVE PROMISE RETURN
var res = showPrompt('Do you like our confirmation?');
res.then(function(ret) {
ret ? alert('Ok clicked') : alert('Cancel clicked');
})
});
});
</script>
Working sample hereFull discussion of the code in this article https://www.experts-exchange.com/articles/28838/Create-a-responsive-confirmation-popup-using-HTML-CSS-jQuery-and-Promises.html
ASKER
Thanks guys.
big Monty - is there a simple Javascript version?
big Monty - is there a simple Javascript version?
is there a simple Javascript versionI thought this was a simple JavaScript solution ?
ASKER
Thanks Julian,
Is this possible without adding too much code?
I.e. could I just have a javascript alert with ok/cancel?
and fit that in with my existing Jquery?
like this..
$('#Email_popup').popup({
onclose: function () {
//SHOW JAVASCRIPT ALERT HERE "ARE YOU SURE" - with OK/CANCEL?
if UserAnswer =YES then
location.reload();
else
//do nothing
end
}
});
Is this possible without adding too much code?
I.e. could I just have a javascript alert with ok/cancel?
and fit that in with my existing Jquery?
like this..
$('#Email_popup').popup({
onclose: function () {
//SHOW JAVASCRIPT ALERT HERE "ARE YOU SURE" - with OK/CANCEL?
if UserAnswer =YES then
location.reload();
else
//do nothing
end
}
});
ASKER
Or, I guess, alternatively.
Make the overlay popup so that it can only be closed by a button? Maybe this would be easier?
Make the overlay popup so that it can only be closed by a button? Maybe this would be easier?
ASKER
So if I understand correctly - you want to put a popup confirm inside a popup close?
And you don't want to use confirm()?
And you don't want to use confirm()?
ASKER
Hey,
Its not ideal but I used this..
Cancel button text:
<input type="button" value="Cancel" id="btnClose" onclick="javascript:if(con firm('Are you sure you want to cancel? If you cancel now you will not be able to view your estimate.')){location.relo ad(); return false;}" />
So, if the user clicks the "Cancel" button, they will get a javascript confirm box that will reload the form if they click "ok".
Very redamentry but does the job in a basic way.
Its not ideal but I used this..
Cancel button text:
<input type="button" value="Cancel" id="btnClose" onclick="javascript:if(con
So, if the user clicks the "Cancel" button, they will get a javascript confirm box that will reload the form if they click "ok".
Very redamentry but does the job in a basic way.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
http://www.bootbox.js