如何使用`window.open`显示模式弹出窗口? [英] How to show a modal pop-up using `window.open`?
问题描述
我目前正在使用 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 through 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 a 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).
我尝试了以下代码:
$(window).load(function() {
window.opener.document.body.disabled=true;
});
$(window).unload(function() {
window.opener.document.body.disabled=false;
});
但这没有用.
我想在弹窗中打开一个网址，然后在打开网址后做一些动作，包括提交表单.
I want to open an URL in the pop-up window and then do certain actions after the URL is opened, including submitting a form.
我打开弹窗的代码:
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");
如果我可以在单击多个按钮时仅打开一个弹出窗口，那也会有所帮助.我的意思是如果我点击btn1"一个名为temp"的弹出窗口；将打开.但是如果我点击btn2"然后不是打开一个新的弹出窗口temp"；应该重新加载.
It would also help if I could open only one pop-up window on the clicking of multiple buttons. I mean if I click on "btn1" a pop-up named "temp" shall open. But if I click on "btn2" then instead of opening a new pop up "temp" shall reload.
推荐答案
Modal Window 使用 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="textjavascript">
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`显示模式弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
