Как создать несколько всплывающих окон div на одной странице? - PullRequest
Новая
       0

Как создать несколько всплывающих окон div на одной странице?

0 голосов
/ 28 мая 2018

Мне нужна помощь с проектом.

Есть ли способ создать несколько всплывающих окон на одной странице с кодом, который у меня есть?Я могу открыть только первый ... Я знаю, что это связано со сценарием, но я не знаю, что мне делать, и в w3school нет ничего, что могло бы мне помочь. 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Popup 1!
  <span class="popuptext" id="myPopup">Popup 1 Content</span>
</div>
&nbsp; &nbsp; &nbsp;
<div class="popup" onclick="myFunction()">Popup 2!
  <span class="popuptext" id="myPopup1">Popup 2 Content!</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
    var popup = document.getElementById('myPopup');
    popup.classList.toggle("show");
}
</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Пожалуйста, попробуйте это 

$(function(){
$('.popup').on('click', function(){
    $(this).addClass('show').siblings().removeClass('show');
  });
});
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

.popup.show .popuptext {
	 visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Popup</h2>

<div class="popup">Popup 1!
  <span class="popuptext">Popup 1 Content</span>
</div>
&nbsp; &nbsp; &nbsp;
<div class="popup">Popup 2!
  <span class="popuptext">Popup 2 Content!</span>
</div>
0 голосов
/ 28 мая 2018

Вы ссылаетесь на один и тот же всплывающий элемент, т.е. на элемент с идентификатором myPopup для обоих событий при нажатии, когда это должно зависеть от того, какой div был нажат.С помощью события мыши (свойство currentTarget) вы сможете получить выбранный (нажатый) элемент, а при переходе к его дочернему элементу вы сможете переключать классы соответствующих всплывающих окон ссылка на ссылку 

function myFunction(event) {
  event.target.children[0].classList.toggle("show");
}

и измените события onFlick myFunction () для передачи параметра события 

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

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

...