如何制作window.open弹出Modal？ [英] how to make window.open pop up Modal?
问题描述
我目前正在使用window.showModalDilog打开一个模式弹出窗口，该窗口不允许父窗口执行任何操作。
I am currently using window.showModalDilog to open a modal pop up window which is not allowing the parent window to do any action.
但在谷歌搜索中，我发现它不是标准方法，并且各种浏览器已停止支持此功能。
But in the google search, I found that it is not the standard method and various browsers has stopped supporting this function.
事实上我在Opera中遇到了这个问题。 Opera给了我javascript错误并在那时停止执行。在该错误之后没有任何事情发生。
In fact I am facing this problem in Opera. Opera gives me the javascript error and stops execution at that point. Nothing can happen after that error.
所以，我只剩下一个选项，那就是window.open。
So, I have only one option left and that is window.open.
但我想禁用父窗口（同样在showModalDilog中）。
But I want to disable parent window (likewise in showModalDilog).
我在下面的代码中试过这样做：
I tried below code to do so:
<script type="text/javascript">
$(window).load(function() {
window.opener.document.body.disabled=true;
});
$(window).unload(function() {
window.opener.document.body.disabled=false;
});
</script>
但我在这方面失败了。
任何人都可以向我推荐代码，以便我可以创建window.open弹出Modal吗？
Can any one suggest me the code so that I can make window.open pop up Modal?
希望我已经很好地解释了我的问题。
如果您需要更多信息，请询问我。
Hope I have explained my question well. Please ask me if you need more information.
提前谢谢....
更新：
我想在弹出窗口中打开一个Url，然后在打开网址后执行某些操作，包括提交表单。
I want to open an Url in the pop up window and then do certain action after the url is opened including submitting a form.
我打开弹出窗口的代码：
My code to open a pop up:
window.open("https://www.picpixa.com/wp-content/plugins/create-own-object/plugin-google-drive/index.php", "socialPopupWindow",
"location=no,width=600,height=600,scrollbars=yes,top=100,left=700,resizable = no");
请帮助我....
更新1：
如果我只需点击多个按钮就可以打开一个弹出窗口，这对我也有帮助。
我的意思是如果我点击btn1弹出名为temp的弹出窗口。但是当我点击btn2然后不再打开一个新的弹出temp将重新加载。
如果你能给我这个建议，它也可以帮助我解决80％的问题。
It would also help me if I can open only one pop up window on the clicking of multiple buttons. I mean If i click on btn1 pop up named "temp" shall open. But when I click btn2 then instead of opening a new pop up "temp" shall reload. If you can give me suggestion on this, it would also help me to solve 80 percent problem.
推荐答案
模态使用ExtJS方法的窗口。
Modal Window using ExtJS approach.
在主窗口中
<html>
<link rel="stylesheet" href="ext.css" type="text/css">
<head>
<script type="text/javascript" src="ext-all.js"></script>
function openModalDialog() {
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Hello',
height: Ext.getBody().getViewSize().height*0.8,
width: Ext.getBody().getViewSize().width*0.8,
minWidth:'730',
minHeight:'450',
layout: 'fit',
itemId : 'popUpWin',
modal:true,
shadow:false,
resizable:true,
constrainHeader:true,
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: '2.html',
frameBorder:'0'
}
}]
}).show();
});
}
function closeExtWin(isSubmit) {
Ext.ComponentQuery.query('#popUpWin')[0].close();
if (isSubmit) {
document.forms[0].userAction.value = "refresh";
document.forms[0].submit();
}
}
</head>
<body>
<form action="abc.jsp">
<a href="javascript:openModalDialog()"> Click to open dialog </a>
</form>
</body>
</html>
在popupWindow 2.html
In popupWindow 2.html
<html>
<head>
<script type="text\javascript">
function doSubmit(action) {
if (action == 'save') {
window.parent.closeExtWin(true);
} else {
window.parent.closeExtWin(false);
}
}
</script>
</head>
<body>
<a href="javascript:doSubmit('save');" title="Save">Save</a>
<a href="javascript:doSubmit('cancel');" title="Cancel">Cancel</a>
</body>
</html>
这篇关于如何制作window.open弹出Modal？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
