0

好的，我对 simplemodal 感到头疼 - 我知道我快到了，但无法让它完全正常工作。我有一个简单的对话框，里面有几个动态创建的 div，例如

<html>
<head>
<!-- Confirm CSS files -->
<link type='text/css' href='css/confirm.css' rel='stylesheet' media='screen' />
</head>

<body>
<div id='container'>
<h1>Test Page</h1>
<div id='content'>
    <div id='confirm-dialog'>
        Page Content Goes Here
    </div>

<!-- modal content -->
<div id='confirm'>
   <div class='header'><span>Header Text</span></div>
   <div class='message'>
     <div id='optionDiv0'><input type='radio' id='options' name='options' value='0' />Option0</div>
     <div id='optionDiv1'><input type='radio' id='options' name='options' value='1' />Option1</div>
     <div id='optionDiv2'><input type='radio' id='options' name='options' value='2' />Option2</div>
   </div>
   <div class='buttons'>
     <div class='yes'>OK</div>
   </div>
  </div>
</div>
<!-- Load JavaScript files -->
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/jquery.simplemodal.js'></script>

<script type="text/javascript">
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
    e.preventDefault();
    confirm("", function () {
        for(var k = 0; k <= 3; k++) {
            if(options[k].checked) {
            var ele = document.getElementById("optionDiv" + k);
            ele.style.display = "none;";
            //alert("Stop Here");
            }
        }

        });
});
});

function confirm(message, callback) {
$('#confirm').modal({
    closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
    position: ["20%",],
    overlayId: 'confirm-overlay',
    containerId: 'confirm-container', 
    containerCss: {
                        height: 300,
                        width: 450,
                        backgroundColor: '#fff',
                        border: '3px solid #ccc'
                  },

    onShow: function (dialog) {
        var modal = this;

        $('.message', dialog.data[0]).append(message);

        // 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();
        });
    }
});
}
</script>
</body>
</html>

在点击代码中，我试图做到这一点，当用户点击其中一个单选按钮，然后点击“确定”时，该项目在弹出窗口中不再可见。如果我在该代码后面加上一个alert("Stop here");（如上面的代码所示，已注释掉），那么我可以看到 div 从弹出窗口中消失。但是，一旦我清除了警告框（或者如果我将其注释掉以使其永远不会运行），下次我激活对话框时，我隐藏的 div 就会重新出现。如何保持隐藏状态，以便下次激活对话框时保持隐藏状态，或者这可能吗？提前致谢。

最终编辑：找到了对话框每次打开时都恢复到原始状态的解决方案。我将它粘贴在 jquery 代码的正上方，它就像一个魅力：

<script> $.modal.defaults.persist = true; </script>

作为另一个问题的一部分，在此站点上的另一个线程中找到。感谢所有帮助过的人。

4

1 回答 1

1

您的代码对我来说仍然不完整，但至于您的confirm函数回调

confirm("", function(){
    $('#confirm input[type=radio]').each(function(){
        if($(this).is(':checked'))
            $(this).parent().empty();
    });
});

像那样？

于 2012-05-15T18:53:12.323 回答