Javascript, чтобы открыть всплывающее окно и отключить родительское окно
Для этого вопроса многие из ответов, которые я видел, неуклюжи, сложны в реализации и неэффективны, поэтому я подумал, что сделаю это, и придумаю мое собственное решение, которое всего лишь крошечный бит css и html
html,
body {
height: 100%;
margin: 0;
}
.body {
min-height: calc(100% - 2rem);
width: 100%;
background-color: grey;
}
.footer {
height: 2rem;
width: 100%;
background-color: yellow;
}<body>
<div class="body">test as body</div>
<div class="footer">test as footer</div>
</body>работает, устанавливая высоту нижнего колонтитула, а затем используя css calc для определения минимальной высоты страницы с нижним колонтитулом все еще внизу, надеюсь, что это поможет некоторым людям:)
3 ответа
var popupWindow=null;
function popup()
{
popupWindow = window.open('child_page.html','name','width=200,height=200');
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
и затем объявляем эти функции в теге body родительского окна.
<body onFocus="parent_disable();" onclick="parent_disable();">
. Как вы и просили, полный HTML-код родительского окна
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
<a href="javascript:child_open()">Click me</a>
</body>
</html>
Content из new.jsp ниже
<html>
<body>
I am child
</body>
</html>
Привет, ответ, который выложил @anu, правильный, но он не будет работать должным образом. Сделав небольшое изменение в функции child_open () , она работает правильно.
<html>
<head>
<script type="text/javascript">
var popupWindow=null;
function child_open()
{
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
else
popupWindow =window.open('new.jsp',"_blank","directories=no, status=no, menubar=no, scrollbars=yes, resizable=no,width=600, height=280,top=200,left=200");
}
function parent_disable() {
if(popupWindow && !popupWindow.closed)
popupWindow.focus();
}
</script>
</head>
<body onFocus="parent_disable();" onclick="parent_disable();">
<a href="javascript:child_open()">Click me</a>
</body>
</html>
Вот так я наконец и сделал! Вы можете нанести слой (полноразмерный) на ваше тело с высоким z-индексом и, конечно, скрытый. Вы сделаете его видимым, когда окно открыто, сфокусируете его на щелчке по родительскому окну (слою) и, наконец, исчезните, когда открытое окно будет закрыто или отправлено, или что-то еще.
.layer
{
position: fixed;
opacity: 0.7;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999;
background-color: #BEBEBE;
display: none;
cursor: not-allowed;
}
и слой в теле:
<div class="layout" id="layout"></div>
функция, которая открывает всплывающее окно:
var new_window;
function winOpen(){
$(".layer").show();
new_window=window.open(srcurl,'','height=750,width=700,left=300,top=200');
}
, сохраняя фокус в новом окне:
$(document).ready(function(){
$(".layout").click(function(e) {
new_window.focus();
}
});
и в открывшемся окне:
function submit(){
var doc = window.opener.document,
doc.getElementById("layer").style.display="none";
window.close();
}
window.onbeforeunload = function(){
var doc = window.opener.document;
doc.getElementById("layout").style.display="none";
}
Надеюсь, это поможет: -)