Question

好的，我在使用simplemodal时遇到了一个很大的问题 - 我知道我几乎就在那里，但是不能让这个工作正常。我有一个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将重新出现。如何隐藏它，以便在下次激活对话框时它保持隐藏状态，或者可能？提前谢谢。

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

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

在另一个帖子中找到此网站，作为另一个问题的一部分。感谢所有帮助过的人。

Answer 1

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

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

喜欢那个？

在simplemodal对话框弹出窗口中操作div的问题 - 进一步编辑

1 个答案: