SimpleModal -回调函数不工作--单击“是”

Question

我想向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>

Answer 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/