Как разрешить только дочернюю страницу быть активной и настраивать родительскую страницу, точно так же, как работают всплывающие окна

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

Я вставил код ниже

window.open('FrameValidation.aspx?cid = "' + newElementId + '"&serviceDate = "' + serviceDate + '"', 'google', ' menubar,resizable,dependent,status,top=150,width=630px,height=570px, top=0, left=960');

окно появляется, но теперь родительское окно все еще доступно

добавить CSS, чтобы стилизовать его как блок и отключить события мыши

— 04.01.2019 11:06

javascript

04.01.2019 11:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я создал одну демонстрацию, вы можете попробовать, она поможет вам выполнить это требование.

Родительская страница

<html>
<head>
<style>
body{
   background:#fff;
}
.popup-container {
    position: absolute;
    background: #f8f8f8;
    padding: 20px 50px;
    text-align: center;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);

    font-size: 50px;
    user-select: none;
    -ms-transform: translate(-50%,-50%);
}
.popup {
    position: fixed;
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 2;
    cursor: pointer;
    user-select: none;
}
button.refresh-button {
    background: #2991d6;
    border: none;
    color: #fff;
    padding: 5 20px;
}
</style>
<script type = "text/javascript" src = "jquery-3.2.1.min.js"></script>

<script type = "text/javascript">
var popupWindow=null;
function child_open()
{ 
   $(".popup").css("display","block");
    popupWindow =window.open('child.html',"_blank");
    console.info(popupWindow);
}
$(document).delegate(".refresh-button","click",function(){
    location.reload();
    popupWindow.close()
});
$(document).ready(function(){
    $(window).focus(function(){
        if (popupWindow && !popupWindow.closed)
        {
            popupWindow.location.href = "child.html";
            popupWindow.focus();
        }       
        else 
        {
            $(window).focus();
            location.reload();
            $('body').css("opacity","1");
            $('body').css("background","#fff");
        } 
    });
    var timer = setInterval(function() {   
        if (popupWindow && popupWindow.closed) {  
            clearInterval(timer);  
            location.reload(); 
        }  
    }, 500);
});

function parent_disable() {
    if (popupWindow && !popupWindow.closed)
    {
        popupWindow.focus();    
    } else {
        $('body').css("opacity","1");
    }
}
</script>
</head>
<body onfocus = "parent_disable();" onclick = "parent_disable();">
    <a href = "javascript:child_open()">Click me</a>
    <div class = "popup" style = "display:none">
    <div class = "popup-container" >
      <div class = "popup-content">
         <h5>Operation in progress...</h5>
         <button type = "button" class = "refresh-button">Refresh</button>
       </div>
    </div>
    </div>
</body>    
</html>

Дочерняя страница

<html>
<script type = "text/javascript" src = "jquery-3.2.1.min.js"></script>
<script type = "text/javascript" >
    $(window).blur(function(){
        window.focus();
    });

    $(document).ready(function(){ 
        window.focus(); 
    });
</script>
<body >
I am child
</body>
</html>

04.01.2019 11:27

Добавьте пустой «оверлейный» div на уровне DOM над содержимым «родительской» страницы и на том же уровне DOM, что и модальный. Расположите этот div фиксированным (или абсолютным) и установите размер, чтобы покрыть всю страницу. Скрыть его, когда модальный режим не активен, и отобразить его, когда модальный режим активен. Когда этот оверлейный div отображается, он служит барьером для базового контента, поэтому все, что пользователь пытается сделать (щелкать ссылки, выделять текст и т. д.), С базовой родительской страницей эффективно блокируется. Установите z-index элемента наложения на число ниже, чем у модального элемента, чтобы наложение находилось ниже модального. Поиграйте с непрозрачностью элемента наложения, чтобы сделать содержимое родительской страницы менее или более непрозрачным.

Есть и другие подходы. Это самый простой вариант, который я знаю, и он охватывает все крайние случаи.

04.01.2019 11:27