SimpleModal - 回调函数不起作用 - 单击是答案

【问题标题】：SimpleModal - Callback function not working -- On click of YesSimpleModal - 回调函数不起作用 - 单击是
【发布时间】：2011-09-28 11:37:25
【问题描述】：

我想向 SimpleModal 发送自定义确认消息。但是点击 Yes ，它不会触发回调函数。

单击关闭按钮时，我想触发简单模式确认框。我有很多地方想要这个功能。这就是为什么 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>

【问题讨论】：

标签： jquery simplemodal confirm

【解决方案1】：

您不应该使用 jQuery 将确认对话框代码附加到页面。通过在加载 DOM 后附加它，插件找不到“.yes”按钮。

您的对话框应该已经在页面上并设置为“display:none”。以下代码将使您页面上任何带有“confirm”类的按钮生成一个确认对话框（假设您已正确包含所有插件 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/

【讨论】：