ajax 加载后 jQuery 工具覆盖重新定位
我正在创建一个 jquery 工具覆盖层，并且正在 beforeLoad 上加载内容，这会更改覆盖层的宽度。一旦我加载内容，宽度就会扩大，但左侧位置不会改变。我希望能够更改位置，使其现在居中，而不是更靠近屏幕的右侧。有什么想法吗？
更新：下面是我的代码。我首先尝试获取要注册的宽度，然后我可以使用下面提供的函数来调整位置。下面的代码返回宽度 470，这是覆盖层的初始宽度。我加载内容后，实际宽度是 740，但警报总是显示 470
<div class="simple_overlay" id="test-overlay">
<div class="details">
<div id="overlayLoadingImg"><img id="overlayAnimatedGif" src="loading.gif" alt="Loading" /></div>
</div>
<a id="overlayClose" class="close">Close</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a.overlay").live("click", function(){
$(this).overlay({
mask: {color: '#000',opacity: 0.5},
top: "25%",
effect: 'apple',
load: true,
closeOnClick: false,
onBeforeLoad: function() {
//IE7 fix for z-index.
this.getOverlay().insertAfter('#exposeMask');
// grab wrapper element inside content
var wrap = this.getOverlay().find(".details");
//check the datatype first. If iframe then load an iframe. If ajax then call the url via ajax call.
var dataurl = "http://someurl.com/path";
// load the page specified in the trigger
$.ajax({
url: dataurl,
success: function(data){
$(wrap).html("");
$(wrap).append(data);
$(".closeOverlay").click(function(){
$("#overlayClose").click();
});
alert($("#test-overlay").width());
},
error: function (jqXHR, textStatus, errorThrown) {
},
complete: function(data){
}
});
}
});
});
});
谢谢
I am creating a jquery tools overlay and i am loading in content on beforeLoad that changes the width of the overlay. Once i load the content, the width expands however the left position does not change. I want to be able to change the position so it is now centered instead of being more towards the right side of the screen. Any thoughts?
UPDATE: Here is my code below. I am first trying to get the width to register then i can use the function provided below to adjust the position. the code below returns a width of 470 which is the initial width of the overlay. After i load the content in, the real width is 740 however that alert always says 470
<div class="simple_overlay" id="test-overlay">
<div class="details">
<div id="overlayLoadingImg"><img id="overlayAnimatedGif" src="loading.gif" alt="Loading" /></div>
</div>
<a id="overlayClose" class="close">Close</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a.overlay").live("click", function(){
$(this).overlay({
mask: {color: '#000',opacity: 0.5},
top: "25%",
effect: 'apple',
load: true,
closeOnClick: false,
onBeforeLoad: function() {
//IE7 fix for z-index.
this.getOverlay().insertAfter('#exposeMask');
// grab wrapper element inside content
var wrap = this.getOverlay().find(".details");
//check the datatype first. If iframe then load an iframe. If ajax then call the url via ajax call.
var dataurl = "http://someurl.com/path";
// load the page specified in the trigger
$.ajax({
url: dataurl,
success: function(data){
$(wrap).html("");
$(wrap).append(data);
$(".closeOverlay").click(function(){
$("#overlayClose").click();
});
alert($("#test-overlay").width());
},
error: function (jqXHR, textStatus, errorThrown) {
},
complete: function(data){
}
});
}
});
});
});
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
编写一个函数，根据屏幕宽度和元素宽度设置覆盖元素的
leftCSS 属性，然后在 AJAX 回调中设置内容后调用该函数。可能是这样的：
jsFiddle 示例
Write a function that sets the
leftCSS property of your overlay element dependent on the width of the screen and the width of the element, and then call that after setting the content in your AJAX callback.Possibly something like this:
jsFiddle example