最近由于快速开发用了微软的ajaxcontroltoolkit,实现点击添加然后弹出一个搜索框去选择添加数据的功能
但是由于页面比较长并且弹出框是居中显示的,所以很多时候不是在屏幕中间显示的,这就需要在页面中设置弹出框的位置
解决方案:
首先我试着用document.getElementById().style.top去设置他的垂直位置,但是如果你的弹出框中有服务器按钮,比如搜索,即使你在弹出框中放了updatepanel,在数据回发加载后弹出框口的位置会自动回到整个页面的中间,可能是因为我们只是用js去设置的弹出框口的位置,但是服务器并不知道,所以在加载后又重新设置的弹出窗口的位置.
最后我看了下弹出窗口的js代码,如下:
Code
<script type="text/javascript">
$addHandler($get("lnkLuRulesShowSearch"), 'click', LuRules_showModalPopupViaClient);
$addHandler($get("lnkLuRulesReturn"), 'click', LuRules_hideModalPopupViaClient);
function LuRules_showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function LuRules_hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
我们看到他弹出窗口是modalPopupBehavior.show();这样来弹出来的,所以我们可以加一个debugger然后可以看到modalPopupBehavior有一个set_Y的方法:
<script type="text/javascript">
$addHandler($get("lnkLuRulesShowSearch"), 'click', LuRules_showModalPopupViaClient);
$addHandler($get("lnkLuRulesReturn"), 'click', LuRules_hideModalPopupViaClient);
function LuRules_showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function LuRules_hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
modalPopupBehavior.set_Y(getElementPos("lnkLuRulesShowSearch").y);
getElementPos是一个辅助js方法用来获取lnkLuRulesShowSearch这个按钮的位置的,最终代码如下:
Code
<script type="text/javascript">
// Add click handlers for buttons to show and hide modal popup on pageLoad
$addHandler($get("lnkLuRulesShowSearch"), 'click', LuRules_showModalPopupViaClient);
$addHandler($get("lnkLuRulesReturn"), 'click', LuRules_hideModalPopupViaClient);
function LuRules_showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.set_Y(getElementPos("lnkLuRulesShowSearch").y);
modalPopupBehavior.show();
}
function LuRules_hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
这样弹出的窗口即使页面回发也不会改变弹出的位置
<script type="text/javascript">
// Add click handlers for buttons to show and hide modal popup on pageLoad
$addHandler($get("lnkLuRulesShowSearch"), 'click', LuRules_showModalPopupViaClient);
$addHandler($get("lnkLuRulesReturn"), 'click', LuRules_hideModalPopupViaClient);
function LuRules_showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.set_Y(getElementPos("lnkLuRulesShowSearch").y);
modalPopupBehavior.show();
}
function LuRules_hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('LuRules_programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
希望对遇到同样问题的朋友有所帮助:)