I've been working on an ASP.net project that uses custom 'modal dialogs'. I use scare quotes here because I understand that the 'modal dialog' is simply a div in my html document that is set to appear "on top" of the rest of the document and is not a modal dialog in the true sense of the word.
In many parts of the web site, I have code that looks like this:
var warning = 'Are you sure you want to do this?';
if (confirm(warning)) {
// Do something
}
else {
// Do something else
}
This is okay, but it would be nice to make the confirm dialog match the style of the rest of the page.
However, since it is not a true modal dialog, I think that I need to write something like this: (I use jQuery-UI in this example)
<div id='modal_dialog'>
<div class='title'>
</div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />
</div>
<script>
function DoSomethingDangerous() {
var warning = 'Are you sure you want to do this?';
$('.title').html(warning);
var dialog = $('#modal_dialog').dialog();
function Yes() {
dialog.dialog('close');
// Do something
}
function No() {
dialog.dialog('close');
// Do something else
}
$('#btnYes').click(Yes);
$('#btnNo').click(No);
}
Is this a good way to accomplish what I want, or is there a better way?
This question is related to
javascript
jquery
jquery-ui
dialog
modal-dialog
The answer is
I managed to find the solution that will allow you to do this using default confirm() with minimum of changes if you have a lot of confirm() actions through out you code. This example uses jQuery and Bootstrap but the same thing can be accomplished using other libraries as well. You can just copy paste this and it should work right away
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Custom Confirm</h1>
<button id="action"> Action </button>
<button class='another-one'> Another </button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
document.body.innerHTML += `<div class="modal fade" style="top:20vh" id="customDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id='dialog-cancel' class="btn btn-secondary">Cancel</button>
<button type="button" id='dialog-ok' class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>`;
function showModal(text) {
$('#customDialog .modal-body').html(text);
$('#customDialog').modal('show');
}
function startInterval(element) {
interval = setInterval(function(){
if ( window.isConfirmed != null ) {
window.confirm = function() {
return window.isConfirmed;
}
elConfrimInit.trigger('click');
clearInterval(interval);
window.isConfirmed = null;
window.confirm = function(text) {
showModal(text);
startInterval();
}
}
}, 500);
}
window.isConfirmed = null;
window.confirm = function(text,elem = null) {
elConfrimInit = elem;
showModal(text);
startInterval();
}
$(document).on('click','#dialog-ok', function(){
isConfirmed = true;
$('#customDialog').modal('hide');
});
$(document).on('click','#dialog-cancel', function(){
isConfirmed = false;
$('#customDialog').modal('hide');
});
$('#action').on('click', function(e) {
if ( confirm('Are you sure?',$(this)) ) {
alert('confrmed');
}
else {
alert('not confimed');
}
});
$('.another-one').on('click', function(e) {
if ( confirm('Are really, really, really sure ? you sure?',$(this)) ) {
alert('confirmed');
}
else {
alert('not confimed');
}
});
</script>
</body>
</html>
This is the whole example. After you implement it you will be able to use it like this:
if ( confirm('Are you sure?',$(this)) )
To enable you to use the confirm box like the normal confirm dialog, I would use Promises which will enable you to await on the result of the outcome and then act on this, rather than having to use callbacks.
This will allow you to follow the same pattern you have in other parts of your code with code such as...
const confirm = await ui.confirm('Are you sure you want to do this?');
if(confirm){
alert('yes clicked');
} else{
alert('no clicked');
}
See codepen for example, or run the snippet below.
https://codepen.io/larnott/pen/rNNQoNp
_x000D_
_x000D_
_x000D_
_x000D_
const ui = {_x000D_
confirm: async (message) => createConfirm(message)_x000D_
}_x000D_
_x000D_
const createConfirm = (message) => {_x000D_
return new Promise((complete, failed)=>{_x000D_
$('#confirmMessage').text(message)_x000D_
_x000D_
$('#confirmYes').off('click');_x000D_
$('#confirmNo').off('click');_x000D_
_x000D_
$('#confirmYes').on('click', ()=> { $('.confirm').hide(); complete(true); });_x000D_
$('#confirmNo').on('click', ()=> { $('.confirm').hide(); complete(false); });_x000D_
_x000D_
$('.confirm').show();_x000D_
});_x000D_
}_x000D_
_x000D_
const saveForm = async () => {_x000D_
const confirm = await ui.confirm('Are you sure you want to do this?');_x000D_
_x000D_
if(confirm){_x000D_
alert('yes clicked');_x000D_
} else{_x000D_
alert('no clicked');_x000D_
}_x000D_
}body {_x000D_
margin: 0px;_x000D_
font-family: "Arial";_x000D_
}_x000D_
_x000D_
.example {_x000D_
padding: 20px;_x000D_
}_x000D_
_x000D_
input[type=button] {_x000D_
padding: 5px 10px;_x000D_
margin: 10px 5px;_x000D_
border-radius: 5px;_x000D_
cursor: pointer;_x000D_
background: #ddd;_x000D_
border: 1px solid #ccc;_x000D_
}_x000D_
input[type=button]:hover {_x000D_
background: #ccc;_x000D_
}_x000D_
_x000D_
.confirm {_x000D_
display: none;_x000D_
}_x000D_
.confirm > div:first-of-type {_x000D_
position: fixed;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
background: rgba(0, 0, 0, 0.5);_x000D_
top: 0px;_x000D_
left: 0px;_x000D_
}_x000D_
.confirm > div:last-of-type {_x000D_
padding: 10px 20px;_x000D_
background: white;_x000D_
position: absolute;_x000D_
width: auto;_x000D_
height: auto;_x000D_
left: 50%;_x000D_
top: 50%;_x000D_
transform: translate(-50%, -50%);_x000D_
border-radius: 5px;_x000D_
border: 1px solid #333;_x000D_
}_x000D_
.confirm > div:last-of-type div:first-of-type {_x000D_
min-width: 150px;_x000D_
padding: 10px;_x000D_
}_x000D_
.confirm > div:last-of-type div:last-of-type {_x000D_
text-align: right;_x000D_
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
_x000D_
<div class="example">_x000D_
<input type="button" onclick="saveForm()" value="Save" />_x000D_
</div>_x000D_
_x000D_
<!-- Hidden confirm markup somewhere at the bottom of page -->_x000D_
_x000D_
<div class="confirm">_x000D_
<div></div>_x000D_
<div>_x000D_
<div id="confirmMessage"></div>_x000D_
<div>_x000D_
<input id="confirmYes" type="button" value="Yes" />_x000D_
<input id="confirmNo" type="button" value="No" />_x000D_
</div>_x000D_
</div>_x000D_
</div>I would use the example given on jQuery UI's site as a template:
$( "#modal_dialog" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
One other way would be using colorbox
function createConfirm(message, okHandler) {
var confirm = '<p id="confirmMessage">'+message+'</p><div class="clearfix dropbig">'+
'<input type="button" id="confirmYes" class="alignleft ui-button ui-widget ui-state-default" value="Yes" />' +
'<input type="button" id="confirmNo" class="ui-button ui-widget ui-state-default" value="No" /></div>';
$.fn.colorbox({html:confirm,
onComplete: function(){
$("#confirmYes").click(function(){
okHandler();
$.fn.colorbox.close();
});
$("#confirmNo").click(function(){
$.fn.colorbox.close();
});
}});
}
_x000D_
_x000D_
_x000D_
_x000D_
var confirmBox = '<div class="modal fade confirm-modal">' +_x000D_
'<div class="modal-dialog modal-sm" role="document">' +_x000D_
'<div class="modal-content">' +_x000D_
'<button type="button" class="close m-4 c-pointer" data-dismiss="modal" aria-label="Close">' +_x000D_
'<span aria-hidden="true">×</span>' +_x000D_
'</button>' +_x000D_
'<div class="modal-body pb-5"></div>' +_x000D_
'<div class="modal-footer pt-3 pb-3">' +_x000D_
'<a href="#" class="btn btn-primary yesBtn btn-sm">OK</a>' +_x000D_
'<button type="button" class="btn btn-secondary abortBtn btn-sm" data-dismiss="modal">Abbrechen</button>' +_x000D_
'</div>' +_x000D_
'</div>' +_x000D_
'</div>' +_x000D_
'</div>';_x000D_
_x000D_
var dialog = function(el, text, trueCallback, abortCallback) {_x000D_
_x000D_
el.click(function(e) {_x000D_
_x000D_
var thisConfirm = $(confirmBox).clone();_x000D_
_x000D_
thisConfirm.find('.modal-body').text(text);_x000D_
_x000D_
e.preventDefault();_x000D_
$('body').append(thisConfirm);_x000D_
$(thisConfirm).modal('show');_x000D_
_x000D_
if (abortCallback) {_x000D_
$(thisConfirm).find('.abortBtn').click(function(e) {_x000D_
e.preventDefault();_x000D_
abortCallback();_x000D_
$(thisConfirm).modal('hide');_x000D_
});_x000D_
}_x000D_
_x000D_
if (trueCallback) {_x000D_
$(thisConfirm).find('.yesBtn').click(function(e) {_x000D_
e.preventDefault();_x000D_
trueCallback();_x000D_
$(thisConfirm).modal('hide');_x000D_
});_x000D_
} else {_x000D_
_x000D_
if (el.prop('nodeName') == 'A') {_x000D_
$(thisConfirm).find('.yesBtn').attr('href', el.attr('href'));_x000D_
}_x000D_
_x000D_
if (el.attr('type') == 'submit') {_x000D_
$(thisConfirm).find('.yesBtn').click(function(e) {_x000D_
e.preventDefault();_x000D_
el.off().click();_x000D_
});_x000D_
}_x000D_
}_x000D_
_x000D_
$(thisConfirm).on('hidden.bs.modal', function(e) {_x000D_
$(this).remove();_x000D_
});_x000D_
_x000D_
});_x000D_
}_x000D_
_x000D_
// custom confirm_x000D_
$(function() {_x000D_
$('[data-confirm]').each(function() {_x000D_
dialog($(this), $(this).attr('data-confirm'));_x000D_
});_x000D_
_x000D_
dialog($('#customCallback'), "dialog with custom callback", function() {_x000D_
_x000D_
alert("hi there");_x000D_
_x000D_
});_x000D_
_x000D_
});.test {_x000D_
display:block;_x000D_
padding: 5p 10px;_x000D_
background:orange;_x000D_
color:white;_x000D_
border-radius:4px;_x000D_
margin:0;_x000D_
border:0;_x000D_
width:150px;_x000D_
text-align:center;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
_x000D_
example 1_x000D_
<a class="test" href="http://example" data-confirm="do you want really leave the website?">leave website</a><br><br>_x000D_
_x000D_
_x000D_
example 2_x000D_
<form action="">_x000D_
<button class="test" type="submit" data-confirm="send form to delete some files?">delete some files</button>_x000D_
</form><br><br>_x000D_
_x000D_
example 3_x000D_
<span class="test" id="customCallback">with callback</span>SweetAlert
You should take a look at SweetAlert as an option to save some work. It's beautiful from the default state and is highly customizable.
Confirm Example
sweetAlert(
{
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!"
},
deleteIt()
);
Faced with the same problem, I was able to solve it using only vanilla JS, but in an ugly way. To be more accurate, in a non-procedural way. I removed all my function parameters and return values and replaced them with global variables, and now the functions only serve as containers for lines of code - they're no longer logical units.
In my case, I also had the added complication of needing many confirmations (as a parser works through a text). My solution was to put everything up to the first confirmation in a JS function that ends by painting my custom popup on the screen, and then terminating.
Then the buttons in my popup call another function that uses the answer and then continues working (parsing) as usual up to the next confirmation, when it again paints the screen and then terminates. This second function is called as often as needed.
Both functions also recognize when the work is done - they do a little cleanup and then finish for good. The result is that I have complete control of the popups; the price I paid is in elegance.
Source: Stackoverflow.com