0

OK、私は 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>

クリックコードでは、ユーザーがラジオボタンの1つをクリックしてから「OK」をクリックすると、そのアイテムがポップアップに表示されないようにしようとしています。そのコードに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 に答える