Почему мой js модальный не закрывается, когда я нажимаю снаружи? - PullRequest
Новая
       6

Почему мой js модальный не закрывается, когда я нажимаю снаружи?

0 голосов
/ 26 ноября 2018

Я пытаюсь создать фотогалерею, в которой можно щелкнуть фотографии, чтобы открыть модальное описание фотографии.Кнопка закрытия работает, однако мне нужно иметь возможность щелкать снаружи, на заднем плане, чтобы также закрыть модальное окно.У меня есть следующий код: 

function stylemodals() {
  var modalarray = document.body.getElementsByClassName("modal");
  for (var i = 0; i < modalarray.length; i++) {
    modalarray[i].setAttribute("style", "display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; color:black; overflow: auto; background-color: rgba(0, 0, 0, .4);");
  }
}
stylemodals();

function stylemodalcontent() {
  var modalcontentarray =
    document.body.getElementsByClassName("modal-content");

  for (var i = 0; i < modalcontentarray.length; i++) {
    modalcontentarray[i].setAttribute("style", "background-color: #FFFFFF; margin: 15 % auto; border: 1 px solid #888;width: 70%;");
  }
}
stylemodalcontent();
//set 1
var mdl1 = document.getElementById('mdl1');
var btn1 = document.getElementById("btn1");
var close1 = document.getElementById("close1");
btn1.onclick = function() {
  mdl1.style.display = "block";
};
close1.onclick = function() {
  mdl1.style.display = "none";
};
window.onclick = function(event) {
  if (event.target == mdl1) {
    mdl1.style.display = "none";
  }
};
<table>
    <tr>
        <td>

            <!-- Trigger/Open The Modal NEEDS AN IMAGE -->
            <input type="image" src="" alt="ib-image" id="btn1">

            <!-- The Modal -->
            <div id="mdl1" class="modal">
                <!-- Modal content NEEDS CONTENT-->
                <div class="modal-content">
                    <span id="close1" style="color: rgb(31, 31, 31); float: right; 
                font-size: 28px; font-weight: bold;">&times;</span>
                    <p>CONTENT</p>
                </div>
            </div>
        </td>
    </tr>
</table>

Я изучал, как это сделать, я скопировал и вставил это из w3schools, а затем изменил его в соответствии со своими потребностями, но я все еще не могу нажать за пределамимодальный, чтобы закрыть.Как мне это сделать?

- РЕДАКТИРОВАТЬ -

вот новый код: 

var modal = document.getElementById("modal");
modal.setAttribute("style", "display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; color: black; overflow: auto; background-color: rgba(0, 0, 0, .4); ");
	
document.getElementById("modal-content").setAttribute("style", "background-color: #FFFFFF; margin: 15% auto; border: 1px solid #888; width: 70%;");
	
var actualmodalcontent = document.getElementById("actual-modal-content");
function modal1 (){
	actualmodalcontent.innerHTML = "CONTENT1"
	modal.style.display = "block";
};
var close = document.getElementById("close");
window.onclick = function(event) {
   		if (event.target == modal) {
   		modal.style.display = "none";
   		}
    if (event.target == close) {
        modal.style.display = "none";
    }
};
<div id="modal">
	<div id="modal-content">
		<span id="close" onclick="close()" style="color: rgb(31, 31, 31); float: right; font-size: 28px; font-weight: bold;">&times;</span>

		<p id="actual-modal-content">
			CONTENT0
		</p>
	</div>
</div>

<input type="image" src="" alt="ib-image" id="btn1" onclick="modal1()">

Ответы [ 2 ]

0 голосов
/ 03 декабря 2018

Я проверил ваш сайт, вся ваша проблема в том, что у вас много моделей, и вы регистрируете более 10 различных событий щелчка на объекте окна, единственное событие нажатия, которое будет фактически зарегистрировано, является последним, остальныепросто переопределяйте друг друга.

всякий раз, когда вы делаете это 

window.onclick = function() {};
// Or
window['onclick'] = function() {};

, то, что вы делаете, это просто простое присвоение свойству объекта, этот объект является объектом окна.

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

0 голосов
/ 26 ноября 2018 
window.onclick = function(event) {
  if (event.target == mdl1) {
    mdl1.style.display = "none";
  }
};

Эта часть кода установит отображение модалов на none, если щелкнуть точно по модалу, а не за его пределами.Поэтому вам нужно использовать event.target !== mdl1 && !mdl1.contains( event.target ) для обнаружения кликов по любому элементу на странице, который не является модалом или его дочерними элементами.https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

Имейте в виду, что вы можете добавить обработчик закрытия в окно, только когда модал действительно открыт, а затем удалить его, как только модал закроется.Таким образом, вы можете предотвратить запуск вашей страницы несколькими событиями onclick для модалов, которые могут даже не отображаться.

...