我想向SimpleModal发送自定义确认消息。但点击“是”,它不会触发回调函数。
点击关闭按钮,我想点击简单模态确认框。我有很多地方我想要这个功能。这就是为什么dint想要在div标签内硬编码消息的原因。 请参阅下面的代码,让我知道如何使这项工作。提前致谢 。
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
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
以下HTML代码:
<!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>
答案 0 :(得分:1)
您不应该使用jQuery将确认对话框代码附加到页面。通过在加载DOM后附加它,插件无法找到“.yes”按钮。
您的对话框应该已经在页面上并设置为“display:none”。以下代码将使页面上任何带有“确认”类的按钮生成一个确认对话框(假设您已正确包含所有插件JS文件)。
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');
});
});
这里的工作示例:http://jsfiddle.net/YzRpP/2/