SimpleModal изменяет размер контейнера - PullRequest
Новая
       13

SimpleModal изменяет размер контейнера

9 голосов
/ 29 декабря 2008

Я использовал SimpleModal . Теперь проблема заключается в изменении размера модального диалога. У меня есть диалоговое окно подтверждения, после нажатия кнопки Да оно становится небольшим.

Второй - 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?

Ответы [ 3 ]

11 голосов
/ 02 августа 2011

Просто сделай это .... 

$("#simplemodal-container").css('height', 'auto'); //To reset the container.
$(window).trigger('resize.simplemodal');           //To refresh the modal dialog.
4 голосов
/ 01 мая 2009

Я хотел бы предложить более простое и гибкое решение:

Посетите 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 позаботиться о несоответствиях браузера.

3 голосов
/ 26 апреля 2009

Вы можете сделать это, добавляя и удаляя классы для элемента modalContainer.

Fog Creek Copilot использует SimpleModal, двух размеров, обычный и широкий. Если вы зайдете в Copilot и нажмете «Войти», вы увидите нормальный размер. Теперь поместите в консоль Firebug 

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

Вы должны увидеть, как контейнер становится шире. Все, что вам нужно сделать, чтобы сделать эту работу на вашем сайте, это определить классы для всех размеров, которые вы хотите, и добавлять и удалять их динамически.

...