modal close button doesnt work

Refresh

November 2018

Views

496 time

1

I have modal div that contains close button and some text. When I click button this works. But when I click close img this doesn't work. I dont understand nothing in console appears, but function doesn't work. Why?

document.getElementsByTagName("a")[0].addEventListener("click", function(event) {
  event.preventDefault()
});
var appereance = true;
var mod = document.getElementById("modal");

function modal() {

  if (appereance) {
    mod.style.display = "block";
    appereance = false;
  } else {
    mod.style.display = "none";
    appereance = true;
  }

}

function close() {
  mod.style.display = "none";
}
#modal {
  border: 5px solid black;
  width: 300px;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 20px;
  display: none;
}

i {
  border: 2px solid black;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
}

#modal>div {
  width: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" onclick="modal()">Demo modal</a>

<div id="modal">
  <div onclick="close()">
    <i class="fa fa-close"></i>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Click <a href="#">close</a> adipisicing elit.</p>
</div>

4 answers

1

близко (), уже предопределенной функции. Пожалуйста, измените имя функции к чему-то еще, и повторите попытку.

Вот рабочий пример

// Code goes here

var appereance = true;
var mod = document.getElementById("modal");

function modal() {

  if (appereance) {

    mod.style.display = "block";
    appereance = false;
  } else {
    mod.style.display = "none";
    appereance = true;
  }

}

function closeMe() {
  mod.style.display = "none";
}
0

Слушатель «закрыть» диалог на DIV, который является сестринской ссылкой с текстом «близко», поэтому событие не пузырек к нему. Перемещение слушателя по ссылке.

Кроме того , глобальная «закрыть» ссылка window.close и браузеры не позволят вам закрыть окно , вы не открывались, так что ничего не происходит. Измените имя функции , чтобы сказать «closeDialogue».

document.getElementsByTagName("a")[0].addEventListener("click", function(event) {
  event.preventDefault();
});

var appereance = true;
var mod = document.getElementById("modal");

function modal() {
  if (appereance) {
    mod.style.display = "block";
    appereance = false;
  } else {
    mod.style.display = "none";
    appereance = true;
  }
}

function closeDialogue() {
  mod.style.display = "none";
}
#modal {
  border: 5px solid black;
  width: 300px;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 20px;
  display: none;
}

i {
  border: 2px solid black;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
}

#modal>div {
  width: 50px;
}
<a href="#" onclick="modal()">Demo modal</a>

<div id="modal">
  <div>
    <i class="fa fa-close"></i>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Click <a href="#"  onclick="closeDialogue()">close</a> adipisicing elit.</p>
</div>
4

Вы должны переименовать близко функцию. Javascript предотвратит его от стрельбы , если вы используете close. Я обычно добавить подчеркивание в начале :)

var appereance = true;
var mod = document.getElementById("modal");

function modal() {
  if (appereance) {
    mod.style.display = "block";
    appereance = false;
  } else {
    mod.style.display = "none";
    appereance = true;
  }
}

function _close() {
  mod.style.display = "none";
    appereance = true;
}
#modal {
  border: 5px solid black;
  width: 300px;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 20px;
  display: none;
}

i {
  border: 2px solid black;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  
}

#modal>div {
  width: 50px;
}
<a href="#" onclick="modal()">Demo modal</a>

<div id="modal">
  <div >
    <i class="fa fa-close" onclick="_close()"></i>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Click <a href="#">close</a> adipisicing elit.</p>
</div>
0

Он работает после того, как я изменил некоторые из вещей здесь.

  1. Исправлено написание appearance
  2. Вызывается это falseпо умолчанию, и использовать его (правильно) в качестве флага для отображения диалогового окна.
  3. Используется xвместо шрифта-удивительном для того , чтобы отобразить «закрываемое» знак для этого значка только для записи демо на работу кода. Вы можете добавить шрифты удивительных классов CSS к нему позже.

Это оно! Проверьте это самостоятельно.

document.getElementsByTagName("a")[0].addEventListener("click", function(event) {
  event.preventDefault();
});

var appearance = false;
var mod = document.getElementById("modal");

function modal() {
  if (appearance) {
    mod.style.display = "none";
    appearance = false;
  } else {
    mod.style.display = "block";
    appearance = true;
  }
}

function closeDialogue() {
  mod.style.display = "none";
  appearance = false;
}
#modal {
  border: 5px solid black;
  width: 300px;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 20px;
  display: none;
}

i {
  border: 2px solid black;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
}

#modal>div {
  width: 50px;
}
<a href="#" onclick="modal()">Demo modal</a>

<div id="modal">
  <div onclick="closeDialogue()">
    <i>x</i>
  </div>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
  <p>Click <a href="#"  onclick="closeDialogue()">close</a> adipisicing elit.</p>
</div>