Дисплей всплывающий с Javascript и HTML - PullRequest
Новая
       2

Дисплей всплывающий с Javascript и HTML

1 голос
/ 08 ноября 2019

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

Вот HTML-код: 

function showPopup() {
  $("#popUp").before('<div id=grayBack></div>');

  var popupH = $("#popUp").height();
  var popupW = $("#popUp").width();

  $("#popUp").css("margin-top", "-" (popupH / 2 40)
    "px");
  $("#popUp").css("margin-left", "-" popupH / 2 "px");

  $("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
    $("#popUp").fadeIn(500);
  });
}

function hidePopup() {
  $("#grayBack").fadeOut('fast', function() {
    $(this).remove()
  });

  $("#popUp").fadeOut('fast', function() {
    $(this).hide()
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="buttons">
    <input id="buttonHoroquartz" type="button" value="Button" onclick="showPopup();">
  </div>
  <div id="popUp">
    <h3>Pop up</h3>
    <p>Hello !</p>
    <p></p>
    <input type="button" value="Ok" onclick="hidePopup();">
  </div>
</body>

У меня нет ошибок, но когда я нажимаю на кнопку, ничего не добавляется, и я не знаю почему. У вас есть идеи?

Ответы [ 4 ]

3 голосов
/ 08 ноября 2019

Следующее не будет работать из-за его синтаксиса: 

$("#popUp").css("margin-top", "-" (popupH / 2 40) "px");
$("#popUp").css("margin-left", "-" popupH / 2 "px");

Это должно быть что-то вроде: 

$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");

Вот почему 

$("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
  $("#popUp").fadeIn(500);
});

никогда не вызывается.

(обратите внимание на +)

Рабочий пример с моим собственным CSS: 

function showPopup() {
  $("#popUp").before('<div id=grayBack></div>');

  var popupH = $("#popUp").height();
  var popupW = $("#popUp").width();

  //$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
  //$("#popUp").css("margin-left", "-" + popupH / 2 + "px");

  $("#grayBack").css('opacity', 0).fadeTo(300, 0.5, function() {
    $("#popUp").fadeIn(500);
  });
}

function hidePopup() {
  $("#grayBack").fadeOut('fast', function() {
    $(this).remove()
  });

  $("#popUp").fadeOut('fast', function() {
    $(this).hide()
  });
}
#popUp {
  display: none;
  width: 200px;
  height: 200px;
  z-index: 100;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

#grayBack {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, .4);
  z-index: 10;
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
  <input id="buttonHoroquartz" type="button" value="Button" onclick="showPopup();">
</div>
<div id="popUp">
  <h3>Pop up</h3>
  <p>Hello !</p>
  <p></p>
  <input type="button" value="Ok" onclick="hidePopup();">
</div>
2 голосов
/ 08 ноября 2019

Хочу только отметить, что можно использовать тег <dialog>, хотя браузеры, которые его поддерживают, на сегодняшний день это Chrome и Opera, в дополнение к некоторым браузерам для мобильных устройств.

В моемМнение <dialog> станет стандартом для "всплывающих окон" и "модальных окон".

Ссылка:

1 голос
/ 08 ноября 2019

Просто исправьте синтаксические ошибки и всплывающее окно будет работать: 

$("#popUp").css("margin-top", "-" + (popupH / 2 + 40) + "px");
$("#popUp").css("margin-left", "-" + popupH / 2 + "px");
0 голосов
/ 08 ноября 2019

Попробуйте (без JQuery) 

toggle = q => document.querySelector(q).classList.toggle('hide');
body { margin: 0; padding: 0; }

.btn {
  padding: 10px;  
  background: #BADA55;
  border-radius: 5px;  
  cursor: pointer
}

.popupBg { 
  position: absolute;
  top: 0;
  left: 0;
  display: flex; 
  min-height: 100vh; 
  width: 100vw; 
  justify-content: center; 
  align-items:center; 
  background: rgba(255,0,0,0.5) 
}

.popup {
  width: 100px;
  min-height: 200px;
  border: 1px solid black;
  background: #88f;
  margin: 40px;
}

.hide { display: none; }
<div class="example">Some content</div>

<div class="btn" onclick="toggle('.popupBg')">PopUP</div>

<div class="popupBg hide" onclick="toggle('.popupBg')" >
    <div class="popup" onclick="event.stopPropagation()" >
      My popup
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...