Серый и отключить родительское окно, как только откроется всплывающее окно

Я пытаюсь отключить родительское окно, как только откроется дочернее окно. Я хотел бы, чтобы родительское окно было серым, когда открывается всплывающее окно.

Ниже мой код всплывающего окна -

<html>
<head>
    <title>Applying</title>
</head>
<body>

<script>
function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
        function(m,key,value) {
            vars[key] = value;
        });
    return vars;
}
var variable1 = getUrlVars()["parameter1"];    

var myScript = document.createElement('script');

myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('urlId', '420');
myScript.setAttribute('dataTitle', variable1);
myScript.setAttribute('dataemail', '[email protected]');

document.body.appendChild(myScript);                              
</script>

<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="window.location.href='some_url'">
</body>
</html>

Ниже мой код родительского окна -

<html>

<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- 
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=550,height=650,left = 570,top = 300');");
}
</script>
<input type=button value="Apply" onClick="javascript:popUp('popup_window_url')">
</body>
</html>

Какой самый лучший и простой способ отключить здесь родительское окно? Любой пример с моим приведенным выше кодом очень поможет мне понять простой пример.

Я видел различные другие сообщения о stackoverflow, но я не могу понять, как включить эти вещи здесь в свой код. Я пытаюсь сделать что-то вроде this.

Любые предложения будут большим подспорьем.


javascript html jquery popupwindow
person Community    schedule 27.07.2013    source источник
comment
Вы можете включить ответ из этого вопроса, создав <iframe> внутри <div id="container"> и изменение атрибута src для iframe в open() функции.   -  person twil    schedule 28.07.2013
comment
Прежде чем разместить его здесь, это единственный пост, который я видел ранее. Но почему-то я не могу сделать то же самое в своем коде. Если вы можете предоставить какой-либо простой пример, основанный на моем коде, это очень поможет. Извините, я новичок в jQuery.   -  person    schedule 28.07.2013

Ответы (2)


arrow_upward
1
arrow_downward

Обновленная скрипка из ответа в this вопрос с поддержкой iframe http://jsfiddle.net/LT5JC/

Открытая функция довольно проста

function open(url) {
    $('#block').fadeIn(); // show grayed pane
    $('#iframe').attr('src', url); // update src of iframe
    $('#container').fadeIn(); // show container with iframe
}
person twil    schedule 27.07.2013

arrow_upward
0
arrow_downward

В приведенном вами примере используется не всплывающее окно в смысле нового окна браузера, а div на существующей странице, на которую загружается новый контент. Этот метод возможен, так как вы использовали бы вызов Ajax для заполнения всплывающего окна. Используя вызов Ajax на вторую страницу, вы можете определить, когда запрос завершился, и при необходимости убрать фон. Если вы действительно хотите, вы можете использовать iFrame и проверьте, когда он загружен, но, на мой взгляд, этот метод не так хорош.

Простая реализация с использованием jQuery:

var cover = $("<div id='cover'></div>");
var content = $("#content"),
    popup_window = $("#popup-window"),
    popup_launcher = $("#popup-launch");

// When we click a button, load our new content into our popup
// and fade the window in once the request has completed. Also,
// fade our cover in, thus restricting the user from clicking the content beneath
popup_launcher.on("click", function() {
    popup_window.load(child_url, function() {
        popup_window.fadeIn();
        content.fadeIn(cover);
    });
});
// When a close button is clicked inside the popup window, fade it out.
popup_window.on("click", ".close", function() {
    popup_window.fadeOut();
    cover.fadeOut();
});

CSS

#cover {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:2;
    display:none;
    background:RGBA(0,0,0,0.5);
}
#popup-window {
    position:fixed;
    left:30%;
    right:30%;
    top:30%;
    bottom:30%;
    z-index:3;
}

Очень простой пример, но наш #cover должен располагаться под нашим #popup-window, поэтому мы используем свойство z-index, чтобы гарантировать это.

Изменить. Хотя метод Ajax был бы лучше, имейте в виду, что из-за HTTP-контроль доступа, вы сможете запрашивать страницы только в том же домене (как правило), поэтому, если вам нужно открыть внешние ресурсы, вы, вероятно, необходимо использовать решение iFrame.

person Ian Clark    schedule 27.07.2013