jQuery SimpleModel在AJAX请求后调整大小
我正在使用SimpleModel插件在站点上显示一个对话框。在该对话框中,我有两个链接将执行AJAX请求,来自这些请求的响应将替换对话框的当前内容。我正试图使事情尽可能灵活,这样,如果我希望以后能够将不同的响应加载到对话框中,它就会正常工作 在一个函数中,我打开对话框:jQuery SimpleModel在AJAX请求后调整大小,jquery,simplemodal,Jquery,Simplemodal,我正在使用SimpleModel插件在站点上显示一个对话框。在该对话框中,我有两个链接将执行AJAX请求,来自这些请求的响应将替换对话框的当前内容。我正试图使事情尽可能灵活,这样,如果我希望以后能够将不同的响应加载到对话框中,它就会正常工作 在一个函数中,我打开对话框: $('div.modal').modal( { minWidth: width, minHeight: height, onOpen: modal_onOpen, onClose: modal_o
$('div.modal').modal(
{
minWidth: width,
minHeight: height,
onOpen: modal_onOpen,
onClose: modal_onClose
});
onClose回调如下所示:
function modal_onClose(dialog)
{
dialog.container.fadeOut('slow', function()
{
dialog.data.hide();
if(reload_dialog)
{
data = ajax_page_load(reload_url, false, false);
if(data.statusText == 'OK')
{
dialog.container.width(reload_width);
dialog.container.height(reload_height);
$.modal.setPosition();
$('div.modal div.container').html(data.responseText);
dialog.data.show();
dialog.container.fadeIn('slow', function()
{
$('a.simplemodal-close').bind('click', function()
{
$.modal.close();
});
});
}
reload_dialog = false;
}
else
{
dialog.overlay.slideUp('slow', function()
{
$.modal.close();
});
}
});
}
当我想将新内容加载到对话框中时,我有以下内容:
var reload_dialog = false;
var reload_url;
var reload_width;
var reload_height;
function load_dialog(url, width, height)
{
reload_dialog = true;
reload_url = url;
reload_width = width;
reload_height = height;
$.modal.close();
}
现在,上面的所有代码都是函数。但我担心我已经克服了复杂的事情。原因如下:
在modal_onClose中,我被迫将close处理程序重新绑定到对话框内部的锚。如果我没有绑定到那里,我就无法在AJAX请求之后关闭对话框,即使锚定标记正确地显示在对话框内部。同样,在绑定锚定标记后,它会运行,但会忽略我设置的onClose动画
由于所有这些,我觉得我没有采取最好的方法来解决问题
有人完成过类似的工作吗?有什么建议吗
提前谢谢,我知道这里有很多信息:)我解决了这个问题,所以我想我会给其他人留下一个回复 基本上,我的问题归结为在不应该调用$.modal.close()时调用$.modal.close() 最初,当我想重新加载对话框时,我调用了$.modal.close()并在onClose()回调中执行了重新加载。通过调用$.modal.close(),似乎我正在剥离close事件处理程序,因此,当我重新加载对话框时,情况就不一样了 为了解决这个问题,我从onClose()回调中删除了重新加载请求,只处理了常规函数中的所有内容。当我使用回调时,我使用返回的对话框对象来执行动画。使用这种新方法,我可以通过以$(“#simplemodal container”)为目标来实现相同的结果 TL;DR-下面的代码允许我通过AJAX将新数据加载到打开的对话框中,同时还可以重新调整对话框的大小和位置 打开对话框的代码:
function pop_dialog(url, width, height)
{
$('div.modal').modal(
{
minWidth: width,
minHeight: height,
onOpen: function(dialog)
{
//Animate the overlay
dialog.overlay.slideDown('slow', function ()
{
//Make sure the contents of the dialog are showing
dialog.data.show();
//Preload
$('.dialog-preloader').show();
$('div.modal img.logo').show();
//Fade in preloader display and perform AJAX request
dialog.container.fadeIn('fast', function()
{
data = ajax_page_load(url, false, false);
//On success, show dialog contents
if(data.statusText == 'OK')
{
$('div.modal div.container').html(data.responseText);
$('.dialog-preloader').hide();
}
});
});
},
onClose: function(dialog)
{
//Fade out the dialog
dialog.container.fadeOut('slow', function()
{
//If we're closing the dialog, animate the overlay off.
dialog.overlay.slideUp('slow', function()
{
//Clean up the mess.
$.modal.close();
});
});
}
});
}
“重新加载”对话框的代码
function load_dialog(url, width, height)
{
//Hide the dialog
$('#simplemodal-container').fadeOut('slow', function()
{
//Hide the dialog contents and show preloader
$('div.modal div.container').hide()
$('.dialog-preloader').show();
//Set the new width
$('#simplemodal-container').width(width);
$('#simplemodal-container').height(height);
$.modal.setPosition();
//Fade container back in with preload message
$('#simplemodal-container').fadeIn('slow', function()
{
//Perform AJAX request to load new dialog
data = ajax_page_load(url, false, false);
//On success, show dialog contents
if(data.statusText == 'OK')
{
$('div.modal div.container').html(data.responseText);
$('.dialog-preloader').hide();
$('div.modal div.container').show();
}
});
});
}
$(".aModal5").click(function (e) {
e.preventDefault();
$.modal("<div>Loading...</div>", {
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
onShow: show,
overlayId: 'simplemodal-overlay',
containerId: 'simplemodal-container',
});
});
function show(dialog) {
$('#simplemodal-container').height('30px');
$('#simplemodal-container').width('30px');
xAjax.postWithLoadTarget("Default.aspx/test", null,
$(".divtest"), function (data) {
$('#simplemodal-container .simplemodal-data').fadeOut(200, function () {
var $this = $(this);
$('#simplemodal-container').animate({ height: 200 }, function () {
$('#simplemodal-container .simplemodal-data').html(data.d);
$this.fadeIn(200, function () {
});
});
});
});
}