I want open window.open as modal popup.
var features = 'resizable= yes; status= no; scroll= no; help= no; center= yes;
width=460;height=140;menubar=no;directories=no;location=no;modal=yes';
window.open(href, 'name', features, false);
I can use Window.ShowModelDialog(), but in my child window I am calling parent javascript method. That is not happening with ShowModelDialog().
function CallParentScript(weburl) {
alert(weburl);
if (weburl != null) {
var url = weburl;
window.opener.SelectUserImageCallback(url);
window.close();
return false;
}
}
If I use window.open(). I can call Parent javascript. But window is not modal.
How to solve this? Can I write something in child popup to always top?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
A pop-up is a child of the parent window, but it is not a child of the parent DOCUMENT. It is its own independent browser window and is not contained by the parent.
Use an absolutely-positioned DIV and a translucent overlay instead.
EDIT – example
You need jQuery for this:
<style>
html, body {
height:100%
}
#overlay {
position:absolute;
z-index:10;
width:100%;
height:100%;
top:0;
left:0;
background-color:#f00;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity:0.1;
cursor:pointer;
}
.dialog {
position:absolute;
border:2px solid #3366CC;
width:250px;
height:120px;
background-color:#ffffff;
z-index:12;
}
</style>
<script type="text/javascript">
$(document).ready(function() { init() })
function init() {
$('#overlay').click(function() { closeDialog(); })
}
function openDialog(element) {
//this is the general dialog handler.
//pass the element name and this will copy
//the contents of the element to the dialog box
$('#overlay').css('height', $(document.body).height() + 'px')
$('#overlay').show()
$('#dialog').html($(element).html())
centerMe('#dialog')
$('#dialog').show();
}
function closeDialog() {
$('#overlay').hide();
$('#dialog').hide().html('');
}
function centerMe(element) {
//pass element name to be centered on screen
var pWidth = $(window).width();
var pTop = $(window).scrollTop()
var eWidth = $(element).width()
var height = $(element).height()
$(element).css('top', '130px')
//$(element).css('top',pTop+100+'px')
$(element).css('left', parseInt((pWidth / 2) - (eWidth / 2)) + 'px')
}
</script>
<a href="javascript:;//close me" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onclick="openDialog($('#content'))">show dialog A</a>
<a href="javascript:;//close me" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" onclick="openDialog($('#contentB'))">show dialog B</a>
<div id="dialog" class="dialog" style="display:none"></div>
<div id="overlay" style="display:none"></div>
<div id="content" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl felis, placerat in sollicitudin quis, hendrerit vitae diam. Nunc ornare iaculis urna.
</div>
<div id="contentB" style="display:none">
Moooo mooo moo moo moo!!!
</div>
Method 2
You can try open a modal dialog with html5 and css3, try this code:
.windowModal {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.windowModal:target {
opacity:1;
pointer-events: auto;
}
.windowModal > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }<a href="#divModal" rel="nofollow noreferrer noopener">Open Modal Window</a>
<div id="divModal" class="windowModal">
<div>
<a href="#close" rel="nofollow noreferrer noopener" title="Close" class="close">X</a>
<h2>Modal Dialog</h2>
<p>This example shows a modal window without using javascript only using html5 and css3, I try it it¡</p>
<p>Using javascript, with new versions of html5 and css3 is not necessary can do whatever we want without using js libraries.</p>
</div>
</div>Method 3
That solution will open up a new browser window without the normal features such as address bar and similar.
To implement a modal popup, I suggest you to take a look at jQuery and SimpleModal, which is really slick.
(Here are some simple demos using SimpleModal: http://www.ericmmartin.com/projects/simplemodal-demos/)
Method 4
I agree with both previous answers. Basically, you want to use what is known as a “lightbox” – http://en.wikipedia.org/wiki/Lightbox_(JavaScript)
It is essentially a div than is created within the DOM of your current window/tab. In addition to the div that contains your dialog, a transparent overlay blocks the user from engaging all underlying elements. This can effectively create a modal dialog (i.e. user MUST make some kind of decision before moving on).
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0