Bymas | моделное окно

Тема закрыта by

pyrokinesis
Причина: не решено

всем привет, есть у меня модельное окно, хочу сделать такое же окно но с другим контентом. дело в том что джаваскрипт ругается. получается что одинаковые параметры, пытался переименовывать не выходит, помогите пожалуйста. ХОЧУ ЧТО БЫ НА СТРАНИЦЕ РАБОТАЛО 2 всплывающих окна а НЕ ПОЛУЧАЕТСЯ ТАК

php

   echo '<div id="myModal" class="modal">';       echo'<div class="modal-content">     <span class="close">×</span>'; echo "Вам предложение бракосочетания</span> <span class=\"ank_d\"><a href='/moduls.zags/edit.php?act=da'>Принять</a> | </span>"; echo "<a href='/moduls.zags/edit.php?act=net'>Отказатся</a></span><br />";  echo "</div></div>";

джаваскрипт

javascript

   // Get the modal var modal = document.getElementById('myModal');  // Get the button that opens the modal var btn = document.getElementById("myBtn");  // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0];  // When the user clicks the button, open the modal  btn.onclick = function() {     modal.style.display = "block"; }  // When the user clicks on <span> (x), close the modal span.onclick = function() {     modal.style.display = "none"; }  // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) {     if (event.target == modal) {         modal.style.display = "none";     } }

CSS

css

   .modal {     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;     top:0;     width: 100%; /* Full width */     height: 150%; /* Full height */     overflow: auto; /* Enable scroll if needed */     background-color: rgb(0,0,0); /* Fallback color */     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }  /* Modal Content */ .modal-content { font-size:20px; position:relative;     background-color: #fefefe;     margin: auto;     padding: 80px 20px 0 20px;     border: 1px solid #888;     width: 20%;     height:15%      }  /* The Close Button */ .close { position:absolute; right:0; top:0; padding:5px;     color: #aaaaaa;     float: right;     font-size: 28px;     font-weight: bold; }  .close:hover, .close:focus {     color: #000;     text-decoration: none;     cursor: pointer; }

Ты хочешь чтобы при нажатии на одно модальное окно открывалось ещё одно?
________
посл. ред. 12.05.2022 в 21:57; всего 2 раз(а); by Emptiness

Emptiness , нет , просто при открытии одного окна не работает другое окно, мне его нужно клонировать типа того.

одно окно для другого контента, другое окно с другим контентом. что бы они не относились друг к другу
________
посл. ред. 12.05.2022 в 22:02; всего 1 раз(а); by 155876556

https://addmorescripts.github.io/hystModal/index_ru.html

Shisui , мне библиотека всплывающего окна ненужна.
я свое окно просто уже под себя подогнал.
просто нужно что бы джава скрипты не контачили друг с другом

155876556 (12.05.2022 в 21:35) всем привет, есть у меня модельное окно, хочу сделать такое же окно но с другим контентом. дело в том что джаваскрипт ругается. получается что одинаковые параметры, пытался переименовывать не выходит, помогите пожалуйста. ХОЧУ ЧТО БЫ НА СТРАНИЦЕ РАБОТАЛО 2 всплывающих окна а НЕ ПОЛУЧАЕТСЯ ТАК

php

   echo '<div id="myModal" class="modal">';       echo'<div class="modal-content">     <span class="close">×</span>'; echo "Вам предложение бракосочетания</span> <span class="ank_d"><a href='/moduls.zags/edit.php?act=da'>Принять</a> | </span>"; echo "<a href='/moduls.zags/edit.php?act=net'>Отказатся</a></span><br />";  echo "</div></div>";

джаваскрипт

javascript

   // Get the modal var modal = document.getElementById('myModal');  // Get the button that opens the modal var btn = document.getElementById("myBtn");  // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0];  // When the user clicks the button, open the modal  btn.onclick = function() {     modal.style.display = "block"; }  // When the user clicks on <span> (x), close the modal span.onclick = function() {     modal.style.display = "none"; }  // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) {     if (event.target == modal) {         modal.style.display = "none";     } }

CSS

css

   .modal {     display: none; /* Hidden by default */     position: fixed; /* Stay in place */     z-index: 1; /* Sit on top */     padding-top: 100px; /* Location of the box */     left: 0;     top:0;     width: 100%; /* Full width */     height: 150%; /* Full height */     overflow: auto; /* Enable scroll if needed */     background-color: rgb(0,0,0); /* Fallback color */     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }  /* Modal Content */ .modal-content { font-size:20px; position:relative;     background-color: #fefefe;     margin: auto;     padding: 80px 20px 0 20px;     border: 1px solid #888;     width: 20%;     height:15%      }  /* The Close Button */ .close { position:absolute; right:0; top:0; padding:5px;     color: #aaaaaa;     float: right;     font-size: 28px;     font-weight: bold; }  .close:hover, .close:focus {     color: #000;     text-decoration: none;     cursor: pointer; }

Исправил?

Алтайский , неа ((

Ну модЕльное окно не может дублироваться

(если оно не выводит рандомно инфу)
Как вариант доп модалка. Если устроит.... Пиши конкретно как и где хочешь... Я тебе нарисую

nefakt [] , ну смотри есть одно модельное окно на одной странице, решил сделать еще одно такое же, но когда нажимаю на ссылку модельного окна , то одно из них не работает