Кажется, нельзя закрыть этот модал, не уничтожив при этом и родителя? - PullRequest
Новая
       15

Кажется, нельзя закрыть этот модал, не уничтожив при этом и родителя?

0 голосов
/ 27 мая 2019

Я открываю модальный режим, когда страница загружается, и эта часть работает нормально. Проблема в том, что когда я нажимаю на него, чтобы закрыть, он также стирает родительскую страницу. Смотри, моя скрипка ..

https://jsfiddle.net/L8vk0frg/

<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</head>
<style>
.cookieBtn {
  font-size: 12px;
  cursor: pointer;
  background-color: #A02525;
  color: white;
  padding: 5px 5px;
  border: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 5px;
}

.cookieBtn:hover {
  background-color: #761010;
}

.cookieWrapper {
  border-radius: 10px;
  background-color: white;
  width: 400px;
  height: 175px;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
   z-index: 999;
   }
   </style>
   <body>
   <p>text on page</p>

   <div id="cookieWrapper" class="cookieWrapper" title="Dialog" onClick="parentNode.remove()" align="center">
   <iframe src="rndcookie.asp" width="392" height="150" scrolling="no" frameborder="0" style="border-radius: 10px;"></iframe>
   <button class="cookieBtn" onclick="" data-dismiss="cookieWrapper" type="button">ACCEPT ALL COOKIES</button>
   </div>

   <script>
    window.onload = function () {
     document.getElementById('button').onclick = function () {
      document.getElementById('cookieWrapper').style.display = "none"
   };
};
</script>

1 Ответ

1 голос
/ 27 мая 2019

Есть 2 проблемы:

  1. у вас нет элемента с идентификатором button
  2. причина, по которой ваш тег <p> и другие исчезают из-за onClick="parentNode.remove()"

Демо 

window.onload = function() {
  document.getElementById('button').onclick = function() {
    document.getElementById('cookieWrapper').style.display = "none"
  };
};
.cookieBtn {
  font-size: 12px;
  cursor: pointer;
  background-color: #A02525;
  color: white;
  padding: 5px 5px;
  border: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.cookieBtn:hover {
  background-color: #761010;
}

.cookieWrapper {
  border-radius: 10px;
  background-color: white;
  width: 400px;
  height: 175px;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75);
  z-index: 999;
}
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<body>
  <p>text on page</p>

  <div id="cookieWrapper" class="cookieWrapper" title="Dialog"  align="center">
    <iframe src="rndcookie.asp" width="392" height="150" scrolling="no" frameborder="0" style="border-radius: 10px;"></iframe>
    <button class="cookieBtn" id="button" onclick="" data-dismiss="cookieWrapper" type="button">ACCEPT ALL COOKIES</button>
  </div>
...