1

シンプルモーダルを閉じて再度開くと、選択メニューが機能しなくなります。

誰かがこれを経験したことがありますか、それを修正する方法を知っていますか？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        #simplemodal-overlay{background-color: #000;}
        #simplemodal-container { background-color:#333;border:8px solid#444;padding: 12px;color:white;}
        form { margin: 100px 0 0 0 }
        fieldset { border: 0; }
        label { display: block; }
        select { width: 200px; }
        .overflow ul { height: 200px; overflow: auto; overflow-y: auto; overflow-x: hidden;}
    </style>
    <link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css"></link>
</head>
  <body>
    <div id="modal" style="display: none">
        <label>This dropdown works</label>
        <select>
            <option value="1">First Option</option>
            <option value="2">Second Option</option>
            <option value="3">Third Option</option>
        </select>
        <p>Now hit esc key</p>
    </div>
    <a id="link" href="javascript:OpenModal('#modal', 200, 300)">Start By Clicking Here!</a>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js?ver=1.4.1'></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.button.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
    <script type='text/javascript' src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
    <script type="text/javascript">
        function OpenModal(selector, h, w, reposition) {
            $(selector).modal({
                onClose: function (dialog) {
                    $.modal.close();
                    $('#link').html("Click me again");
                    $('#modal label').html("This dropdown doesn't work");                    
                }
            });
        }
        $(function () {
            $('select').selectmenu();
        });
    </script>
</body>
    </html>
4

2 に答える 2

2

どちらのプラグインも変更する必要はありません。バインディングを onShow コールバックに移動するだけです。次のようにしてください。

    <script type="text/javascript">
    function OpenModal(selector, h, w, reposition) {
        $(selector).modal({
            onShow: function (dialog) {
                $('select', dialog.data[0]).selectmenu();
            },
            onClose: function (dialog) {
                $.modal.close();
                $('#link').html("Click me again");
                $('#modal label').html("This dropdown doesn't work");                    
            }
        });
    }
</script>

オプションpersist: trueが必要な場合もあります。それでもうまくいかない場合は、お知らせください。

于 2012-02-03T18:07:11.443 に答える
0

simplemodalダイアログプラグインがこれを引き起こしているようです。

つまり、閉じると、次のコードが実行されます。

if (s.o.persist) {
  // insert the (possibly) modified data back into the DOM
  ph.replaceWith(s.d.data.removeClass('simplemodal-data').css('display', s.display));
}
else {
  // remove the current and insert the original,
  // unmodified data back into the DOM
  s.d.data.hide().remove();
  ph.replaceWith(s.d.orig);
}

replaceWithは、元のDOM要素を削除し、ダイアログの作成のためにコピーされたものを挿入します。selectmenu（）は元のオブジェクトにバインドされていますが、元のオブジェクトは削除されています。したがって、CSSは保持されますが（simpleModalがオリジナルのクローンを作成したため）、イベントバインディングは吹き飛ばされます。

simplemodalプラグインを使用する代わりに、jquery-uiのダイアログの使用を検討できます。タイトルバーを表示したくない場合は.ui-dialog-titlebar { display: none; }、cssセレクターにを追加するだけです。

基本的な例は次のとおりです。http：//jsfiddle.net/fordlover49/nfngy/

于 2012-01-25T01:32:09.777 に答える