Menu
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.
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.
So, I have only one option left and that is window.open.
But I want to disable parent window (likewise in showModalDilog).
I tried below code to do so:
$(window).load(function() {
window.opener.document.body.disabled=true;
});
$(window).unload(function() {
window.opener.document.body.disabled=false;
});
But that did not work.
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.
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");
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.
886
Modal Window using ExtJS approach.
In Main Window
<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>
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>
You can't make window.open modal and I strongly recommend you not to go that way.
Instead you can use something like jQuery UI's dialog widget.
UPDATE:
You can use load() method:
$("#dialog").load("resource.php").dialog({options});
This way it would be faster but the markup will merge into your main document so any submit will be applied on the main window.
And you can use an IFRAME:
$("#dialog").append($("<iframe></iframe>").attr("src", "resource.php")).dialog({options});
This is slower, but will submit independently.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
