simplemodal，关闭然后立即重新打开

发布于 2024-08-11 06:01:40 字数 1236 浏览 6 评论 0原文

我正在尝试使用 simplemodal jquery 插件来显示一些 HTML。我在这个 html 中有一个 ajax 按钮，按下该按钮时会将一些更宽的 HTML 内容返回到模式框。

似乎没有办法让 simplemodal “意识到”这一点并让它自动调整大小，所以我想做的就是在按下 ajax 按钮时杀死模式，然后在内容被删除后重新创建它返回并让初始自动调整大小处理它。但是我不知道如何进行这项工作。

到目前为止，我已经：

$('#Element input.Ajax').click(function (e) {

//Get Ajax content and return to div 

$.modal.close();

$('#Element').modal(
              {
              onOpen: function (dialog) 
              {
              dialog.overlay.fadeIn('slow', function () 
                  {dialog.data.hide();
                   dialog.container.fadeIn('slow', function ()  
                      {dialog.data.slideDown('slow');});
                  });
               },
            onClose: function (dialog) 
                {
                dialog.data.fadeOut('slow', function () 
                    {
                    dialog.container.hide('slow', function () 
                        {
                        dialog.overlay.fadeOut('slow', function () 
                            {$.modal.close();});
                        });
                    });
                },
            overlayClose:true,
            opacity: 75,
              });

但是这些代码所做的只是关闭覆盖层而不重新打开。

原文

I'm tyring to use the simplemodal jquery plugin to display some HTML. I have an ajax button in this html that when pressed will return some wider HTML content to the modal box.

There doesn't seem to be a way to make simplemodal "aware" of this and have it autoresize, so waht I'd like to do is just kill the modal when the ajax button is pressed and then recreate it after the content has been returned and let the inital autosize handle it. However I can't figure out how to make this work.

So far i have:

$('#Element input.Ajax').click(function (e) {

//Get Ajax content and return to div 

$.modal.close();

$('#Element').modal(
              {
              onOpen: function (dialog) 
              {
              dialog.overlay.fadeIn('slow', function () 
                  {dialog.data.hide();
                   dialog.container.fadeIn('slow', function ()  
                      {dialog.data.slideDown('slow');});
                  });
               },
            onClose: function (dialog) 
                {
                dialog.data.fadeOut('slow', function () 
                    {
                    dialog.container.hide('slow', function () 
                        {
                        dialog.overlay.fadeOut('slow', function () 
                            {$.modal.close();});
                        });
                    });
                },
            overlayClose:true,
            opacity: 75,
              });

But all this code does is close the overlay without reopening.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

孤星 2024-08-18 06:01:40

您还可以确定新数据的维度并相应地调整容器的大小。

但是，根据您的方法，您可以执行以下操作：

// inside the onShow callback for the first modal, bind the click event
onShow: function (dialog) {
    $('#Element input.Ajax', dialog.container[0]).click(function (e) {
        $("#new-modal").load("page.html", function () {
            $("#new-modal").modal({
                // your options
            });
        });
    });
}

希望有所帮助。

-埃里克

You could also determine the dimensions of the new data and resize the container accordingly.

However, based on your method, you could do something like:

// inside the onShow callback for the first modal, bind the click event
onShow: function (dialog) {
    $('#Element input.Ajax', dialog.container[0]).click(function (e) {
        $("#new-modal").load("page.html", function () {
            $("#new-modal").modal({
                // your options
            });
        });
    });
}

Hope that helps.

-Eric

回复收藏 0 原文

~没有更多了~