9

SimpleModalを使用しました。ここで問題となるのは、モーダルダイアログのサイズ変更です。確認ダイアログがありますが、[はい]を押した後は基本的に小さいです。

2つ目はmy.php、大きなデータが含まれていることです。既存のモデルを追加するという概念を使用しています。コンテンツのサイズを変更するにはどうすればよいですか？

そして、私のJavaScriptスニペットには次のものがあります。

$(document).ready(function () {
    $('#confirmbutton, #confirmDialog a.confirm').click(function (e) {
        e.preventDefault();

        confirm("Continue to the SimpleModal project page?", function () {
        window.location.href = 'http://localdata/';
        });
    });
});

function confirm(message, callback) {
    $('#confirm').modal({
        close:false,
        position: ["20%",],
        overlayId:'confirmModalOverlay',
        containerId:'confirmModalContainer',
        onShow: function (dialog) {
            dialog.data.find('.message').append(message);

            // If the user clicks "yes"
            dialog.data.find('.yes').click(function () {
                // Call the callback
                // $.modal.close();

                $.get("my.php", function (data) {
                    /* Sample response:
                     *   <div id="title">My title</div>
                     *   <div id="message">My message</div>
                     *
                    */

                    var resp = $("<div/>").append(data);
                    var title = resp.find("#title").html(),
                    message = resp.find("#message").html();
                    dialog.data.find(".header span").html(title);
                    dialog.data.find(".message").html(message);
                    dialog.data.find(".buttons .yes").hide();
                    dialog.data.find(".buttons .no").hide();

                    //dialog.data.find(".buttons .no").html("Close");

                    // No need to call the callback or $.modal.close()
                });// End for click
            });//End for on show
        } //End for modal
    }); //Close for modal
}

私のCSS：

confirmModalContainer {height:700px; width:700px; font-family:'Trebuchet MS', Verdana, Arial; font-size:16px; text-align:left; background:#fff; border:2px solid #336699;}

SimpleModalコンテナのサイズを変更するにはどうすればよいですか？Ajaxコールで？

4

3 に答える 3

11

これを行うだけで....

$("#simplemodal-container").css('height', 'auto'); //To reset the container.
$(window).trigger('resize.simplemodal');           //To refresh the modal dialog.
于 2011-08-02T18:13:48.437 に答える
3

これを行うには、modalContainer要素のクラスを追加および削除します。

Fog Creek Copilotは、ノーマルとワイドの2つのサイズのSimpleModalを使用しています。Copilotに移動して[ログイン]をクリックすると、通常のサイズが表示されます。今、Firebugのコンソールに入れます

>> $('.modalContainer').addClass('wide')

コンテナが広くなるのが見えるはずです。サイトでこれを機能させるために必要なのは、必要なすべてのサイズのクラスを定義し、それらを動的に追加および削除することだけです。

于 2009-04-26T06:13:22.567 に答える