Question

I have used SimpleModal. Now the problem is the resizing of the modal dialog. I have a confirm dialog, and it is basically small after pressing Yes.

The second one is my.php and it contains large data. I am using the concept of appending an already existing model. How do I resize the content?

我的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调用中？

Answer 1

只要做这个...

$("#simplemodal-container").css( height ,  auto ); //To reset the container.
$(window).trigger( resize.simplemodal );           //To refresh the modal dialog.

Answer 2

我想提出一个更简单、更灵活的解决方案：

访问http://www.ericmmartin.com/simplemodal-test/，在Firebug中运行以下代码，然后在对话框中单击“按钮”以调整大小。

// Inject a CSS class into the document
$( head style[type=text/css] ).append( .wide{width:750px !important;} );

$( #modalContentTest ).modal({
  onShow:function(dialog){
    dialog.data.find( .animate ).click(function(){

      // You can put this code in your "my.php" callback

      dialog.container.addClass( wide );

      /*
      // OR set the width explicitly
      // (make sure you remove the addClass line if you want to use this)
      dialog.container.width(700);
      */

      /*
        Force SimpleModal to reposition the 
        dialog by triggering its resize event
      */
      $(window).trigger( resize.simplemodal );

    }); //end click
  } // end onShow
}); // end modal

使用这种方法，您无需定义新的CSS以重新居中对话框，可以让SimpleModal处理浏览器不一致性。

Answer 3

你可以通过为模态容器元素添加和移除类来完成它。

Fog Creek Copilot使用SimpleModal，有两个尺寸，普通和宽。如果您前往Copilot并单击 "登录"，您将看到普通尺寸。现在，请放到Firebug的控制台中。

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

你应该看到容器变宽了。在您的网站上使其正常工作的所有操作只需要为您需要的所有尺寸定义类，然后动态添加和删除它们即可。

友情链接