SimpleModal - Callback function not working -- On click of Yes
I wanted to send custom confirm message to SimpleModal . But on click of Yes , its not triggering callback function.
on click of close button , I want to fire Simple modal confirm box . I have many places were i want this functionality . That's why dint wanted to hard-code message inside div tag. Please see below code and let me know how can i make this work . thanks in advance .
jQuery(function($) {
$('#btn').click(function(e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("", function() {
window.location.href = 'http://www.google.com/';
});
});
});
function confirm(message, callback) {
// alert("1");
$('body').append('<div id="container"><div id="confirm" style="display:none"><div class="header"><span>Confirm</span></div><div class="message">' + message + '</div><div class="buttons"><div class="no simplemodal-close">No</div><div class="yes">Yes</div></div></div><div style="display: none"><img src="skin/img/header.gif" alt="" /><img src="skin/img/button.gif" alt=""/></div></div>');
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
resizable: false,
position: ["20%", ],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onButtonClick: function(dialog) {
var modal = this;
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function() {
// call the callback
开发者_C百科 if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
HTML code below :
<!DOCTYPE html>
<html>
<head>
<title> Confirm Modal Dialog </title>
<!-- Confirm CSS files -->
<link type='text/css' href='skin/confirm.css' rel='stylesheet' media='screen' />
<!-- JS files are loaded at the bottom of the page -->
</head>
<body>
<input id="btn" type='button' name='confirm' value='Close' onclick="return confirm('Are you sure?');" />
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery/jquery.simplemodal.js'></script>
<script type='text/javascript' src='jquery/confirm.js'></script>
</body>
</html>
You shouldn't be appending the confirm dialog code to the page with jQuery. By appending it after the DOM is loaded, the plugin can't find the ".yes" button.
Your dialog should already be on the page and set to "display:none". The following code will make any button on your page with the class "confirm" produce a confirm dialog (assuming you have correctly included all the plugin JS files).
CSS:
#confirm {display:none;}
HTML:
<input type='button' class='confirm' value='Click to Confirm'/>
<!-- modal content -->
<div id='confirm'>
<div class='header'><span>Confirm</span></div>
<div class='message'></div>
<div class='buttons'>
<div class='no simplemodal-close'>No</div><div class='yes'>Yes</div>
</div>
</div>
JS:
$('.confirm').click(function (e) {
e.preventDefault();
confirm("Confirm yes or no", function () {
alert('yes clicked');
});
});
Working example here: http://jsfiddle.net/YzRpP/2/
加载中,请稍侯......
精彩评论