在单个页面上创建多个弹出框

Question

在单个页面上创建多个弹出框

7

我在创建多个模态窗口时遇到了一些问题，使用的样本代码来自w3schools.com。我使用的是以下代码： http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2 我发现了一个类似的问题，但在jsfiddle中尝试了那个解决方案后仍然没有结果，有人有什么想法吗？先前的主题： Support for Multiple Modal Single Page https://jsfiddle.net/oa1dr3q6/

<h2>1st Modal</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>

<h2>2nd Modal</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>

Script:

// 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";
}
}

- ccruz

2

可能是支持多模式单页的重复问题。 - Sub 6 Resources

1

看一下你链接的问题的答案，它会解决你的问题。 - Sub 6 Resources

你的代码几乎和问题代码完全一样。请阅读下面的答案。答案中有额外的Javascript代码。将其添加到你的代码中，它就可以工作了。 - Sub 6 Resources

我看了答案，完全复制了它，但仍然没有成功。 - ccruz

在你的 JSFiddle 上，使用 class="myBtn" 而不是 id="myBtn"，然后它就应该可以工作了。 - Sub 6 Resources

显示剩余6条评论

8个回答

4

一些基于@junkfoodjunkie答案的改进

在没有JS情况下使用HTML和CSS创建弹出框/模态框：

.button {
    display: inline-block;
    border: 1px solid;
    border-color: #012766;
    background: #012766;
    padding: 10px 16px;
    border-radius: 4px;
    color: #ffffff;
}
[id^=modal] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}
[id^=modal]:target {
    display: block;
}
input[type=checkbox] {
    position: absolute;
    clip: rect(0 0 0 0);
}
.popup {
    width: 100%;
    height: 100%;
    z-index: 99999;
}
.popup__overlay {
    position: fixed;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #000000b3;
}
.popup__wrapper {
    position: fixed;
    z-index: 9;
    width: 80%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    padding: 58px 32px 32px 32px;
    background: #fff;
}
.popup__close {
    position: absolute;
    top: 16px;
    right: 26px;
}

<a class="button" href="#modal1">Open modal 1</a>

<div class="popup" id="modal1">
    <a class="popup__overlay" href="#"></a>
    <div class="popup__wrapper">
        <a class="popup__close" href="#">Close icon here</a>
        <p>POPUP 1 : CONTENT HERE</p>
    </div>
</div>


<a class="button" href="#modal2">Open modal 2</a>

<div class="popup" id="modal2">
    <a class="popup__overlay" href="#"></a>
    <div class="popup__wrapper">
        <a class="popup__close" href="#">Close icon here</a>
        <p>POPUP 2 : CONTENT HERE</p>
    </div>
</div>

- Vincent Garcies

2

为什么你要用那么多代码和JavaScript来完成只需使用CSS和HTML就能实现的事情呢？（这是一个简化的例子，当然可以添加动画等效果）

[id^=modal] {
  display: none;
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-height: 3em;
  min-width: 5em;
  max-width: 10em;
  }
input[type=checkbox] {
  position: absolute;
  clip: rect(0 0 0 0);
  }
#modal1:target {
  display: block;
  }
#modal2:target {
  display: block;
  }
[id^=modal] a {
  float: right;
  }

<div id="content">
    <p>This is the content-container</p>
    <a href="#modal1">Open first modal</a><br>
    <a href="#modal2">Open second modal</a>
  <div id="modal1"><a href="#">Close</a>This is the first modal</div>
  <div id="modal2"><a href="#">Close</a>This is the second modal</div>
</div>

- junkfoodjunkie

这太棒了。我以为没有 JavaScript 就不可能有模态框，但这样做非常简洁。 - Deborah

如果您使用Bootstrap 4.5，您将不需要任何额外的CSS或Javascript，只需纯HTML即可。 - basZero

1

如果模态框需要从AJAX调用中获取数据，就需要使用JS。 - Ken Ingram

2

我知道我来晚了。

看一下这个。

 body {
            font-family: Arial, Helvetica, sans-serif;
        }

        /* The Modal (background) */
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            padding-top: 80px;
            /* Location of the box */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* 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 */
            overflow: auto;
        }

        /* Modal Content */
        .modal-content {
            max-height: 80%;
            overflow: auto;
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 80%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0
            }

            to {
                top: 0;
                opacity: 1
            }
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .modal-header {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 2px 16px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="modal.css">
</head>

<body>
    <button id="myBtn">Button 1</button>
    <button id="myBtn1">Button 2</button>
    <button id="myBtn2">Button 3</button>

    <!-- The Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Button 1 Clicked</h2>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus aspernatur perferendis ad sunt.
                    Eius, possimus? Quae at eum repudiandae obcaecati vitae accusantium, perferendis sapiente
                    temporibus, necessitatibus voluptatem iste cumque et?</p>
            </div>
            <div class="modal-footer">
                <h3>Modal Footer</h3>
            </div>
        </div>

    </div>

    <!-- The Modal -->
    <div id="myModal1" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Button 2 Clicked</h2>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores voluptatum ipsa cum aliquid, ex
                    inventore, culpa obcaecati modi deleniti enim consequuntur tenetur. Earum numquam sit ratione eum
                    sequi praesentium, unde maxime ullam iure rem mollitia perferendis eos possimus neque, nisi dicta.
                    Obcaecati dignissimos, dolores labore rerum quisquam non explicabo repellat!</p>
            </div>
            <div class="modal-footer">
                <h3>Modal Footer</h3>
            </div>
        </div>

    </div>

    <!-- The Modal -->
    <div id="myModal2" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>Button 3 Clicked</h2>
            </div>
            <div class="modal-body">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit laudantium quia non laborum
                    ea, similique ex iusto minus obcaecati optio sapiente aut eveniet porro odio veniam excepturi
                    facilis iste fuga? Porro atque odio, fuga blanditiis voluptate ducimus veritatis id ea possimus?
                    Facilis tempore officiis quos assumenda dolorem placeat sed veniam dolor eveniet magnam. Iure ullam
                    odit qui, magni suscipit pariatur nesciunt temporibus aspernatur doloribus quis nobis quas esse
                    perspiciatis, asperiores eum quidem placeat minus alias veniam molestias sit. Ipsam numquam,
                    sapiente facere voluptatem eum, maiores blanditiis cupiditate corporis quos ratione, quia
                    praesentium dolore nihil voluptatum impedit quae consequatur sit pariatur.
                </p>
            </div>
            <div class="modal-footer">
                <h3>Modal Footer</h3>
            </div>
        </div>

    </div>

    <script>
        var datamap = new Map([
            [document.getElementById("myBtn"), document.getElementById("myModal")],
            [document.getElementById("myBtn1"), document.getElementById("myModal1")],
            [document.getElementById("myBtn2"), document.getElementById("myModal2")]
        ]);

        datamap.forEach((value, key) => {
            doModal(key, value);
        });

        function doModal(anchor, popupbox) {

            // Get the <span> element that closes the modal
            var span = popupbox.getElementsByClassName("close")[0];

            anchor.addEventListener("click", function (event) {
                popupbox.style.display = "block";
            });

            span.addEventListener("click", function (event) {
                popupbox.style.display = "none";
            });

            window.addEventListener("click", function (event) {
                if (event.target == popupbox) {
                    popupbox.style.display = "none";
                }
            });
        }
    </script>

</body>

</html>

为每个创建的弹出窗口在MAP中添加条目。

第一个参数用于显示弹出窗口的元素。(在我们的情况下是按钮)
第二个参数模态弹出窗口本身。

- Manjunath Prabhakar

2

请确保您在JSFiddle中使用class="myBtn"而不是id="myBtn"，然后它应该能够工作。

这是完整的可工作代码：

HTML：

<h2>1st Modal</h2>

<!-- Trigger/Open The Modal -->
<button class="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<h2>2nd Modal</h2>

<!-- Trigger/Open The Modal -->
<button class="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal2-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

JS:

// Get the modal
var modal = document.getElementsByClassName('modal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");


// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
btn[0].onclick = function() {
    modal[0].style.display = "block";
}

btn[1].onclick = function() {
    modal[1].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span[0].onclick = function() {
    modal[0].style.display = "none";
}

span[1].onclick = function() {
    modal[1].style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal[0]) {
         modal[0].style.display = "none";
     }
    if (event.target == modal[1]) {
         modal[1].style.display = "none";
     }  
}

- Sub 6 Resources

这个解决方案完美地运作了！干得好，我之前卡在这里卡了好一阵子。 - swagless_monk

由于这个答案在顶部，不要忘记修改window.onclick以反映模态框。我会尝试修改答案。 - PanDe

“[0]”和“[1]”是用来干什么的？我不明白……如果我们有超过两个模态框怎么办？ - Louis.vgn

2

我的建议

const btns = document.getElementsByClassName('btn');
const spans = document.getElementsByClassName('close');
const modals = document.getElementsByClassName('modal');

[...btns].forEach((btn, ind) => {
  btn.onclick = () => (modals[ind].style.display = 'block');
});

[...spans].forEach((span, ind) => {
  span.onclick = () => (modals[ind].style.display = 'none');
});

window.onclick = (e) => {
  [...modals].forEach((modal) => {
    if (e.target === modal) {
      modal.style.display = 'none';
    }
  });
};

如果您不使用ID，而是只使用类名：

<button id="myBtn">Open Modal</button>

<div id="myModal" class="modal">

<span class="close">×</span>

只需使用

<button class="btn">Open Modal</button>

<div class="modal">

<span class="close">x</span>

你可以将所有的展开按钮存储在HTML集合中。

const btns = document.getElementsByClassName('btn');

将 HTML 集合转换为数组

[...btns]

在数组中的每个按钮上添加onclick事件。保留HTML，不要解释。

.forEach((btn, ind) => {
  btn.onclick = () => (modals[ind].style.display = 'block');
});

你需要对span做同样的事情（关闭按钮）

- Paweł Rugała

这是什么？没有信息，什么都没有...？ - PanDe

@PanDe 抱歉，已添加简短描述。 - Paweł Rugała

1

我知道这里有很多答案，但我想分享我最终得出的解决方案。我的解决方案基于将与每个模态框对应的id传递到函数中。

在下面的示例中，我使用了两个模态框，但您可以使用更多。您只需在modal类元素中设置id，并将相同的id传递给button openModal函数中的onclick即可。

var modals = document.getElementsByClassName("modal");
var modalOpenBtn = document.getElementsByClassName("modalOpenBtn");
var currentModal = null;

// Function to open modal by id
function openModal(id) {
  for (i = 0; i < modals.length; i++) {
    if (modals[i].getAttribute('id') == id) {
      currentModal = modals[i];
      currentModal.style.display = "block";
      break;
    }
  }
}

// When the user clicks the button, open modal with the same id
modalOpenBtn.onclick = function() {
  let currentID = modalOpenBtn.getAttribute('id');
  openModal(currentID);
}

// When the user clicks anywhere outside of the modal or the X, close
window.onclick = function(event) {
  if (event.target == currentModal || event.target.getAttribute('class') == 'modalClose') {
    currentModal.style.display = "none";
  }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }

  .modalContent {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    max-width: 450px;
  }

  .modalClose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .modalClose:hover,
  .modalClose:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }

<!-- Two modals here, but could use more, just update ids on the modal class elements and in the buttons onclick openModal() call. -->

<button id="modalA" class="modalOpenBtn" onclick="openModal('modalA')">Modal A</button>
  <div id="modalA" class="modal">
    <div class="modalContent">
      <span class="modalClose">×</span>
      <div>
        Modal A text
      </div>
    </div>
  </div>

  <button id="modalB" class="modalOpenBtn" onclick="openModal('modalB')">Modal B</button>
  <div id="modalB" class="modal">
    <div class="modalContent">
      <span class="modalClose">×</span>
      <div>
        Modal B text
      </div>
    </div>
  </div>

我在每个openModalBtn类元素中添加了相同的id，因为您可以从单击的按钮中获取getAttribute而无需将其传递给函数。

- LamerLink

0

关于Denis Mysenko所提供的出色答案的更新：

我的JS曾经是这样的（针对一个模态框）：

let modal = document.getElementById('about-modal');
let btn = document.getElementById('about-modal-btn');
let close = document.getElementsByClassName('close')[0];

btn.onclick = function() {
    modal.style.display = 'block';
}

close.onclick = function() {
    modal.style.display = 'none';
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}

window.onkeydown = function(event) {
    if (event.key == 'Escape') {
        modal.style.display = 'none';
    }
}

我的新JS（采用自Denis的答案）：

let modals = document.getElementsByClassName('modal');
let modalBtns = document.getElementsByClassName('modal-btn');
let closeBtns = document.getElementsByClassName('close');

for(let modalBtn of modalBtns) {
    modalBtn.onclick = function(event) {
        document.querySelector(event.target.getAttribute('href') ).style.display = 'block';
    }
}

for(let closeBtn of closeBtns) {
    closeBtn.onclick = function(event) {
        event.target.parentNode.parentNode.style.display = 'none';
    }
}

window.onclick = function(event) {
    if(event.target.classList.contains('modal') ) {
        for(let modal of modals) {
            if(typeof modal.style !== 'undefined') {
                modal.style.display = 'none';    
            }
        }
    }
}

window.onkeydown = function(event) {
    if (event.key == 'Escape') {
        for(let modal of modals) {
            modal.style.display = 'none';
        }
    }
}

希望这能帮助到未来的某个人。我清理了一些不一致和其他小问题，并简化了代码和变量名称，使用了es6语法等。有人也可以利用这段代码创建一个单独的模态框。示例模态框结构：

<button id="settings-modal-btn" class="modal-btn" href="#settings-modal">Settings</button>
<div id="settings-modal" class="modal">
    <div class="modal-content">
        <button class="close">&times;</button>
        <p>Content here...</p>
    </div>
</div>

- Justin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Denis Mysenko · Accepted Answer

您将模态触发按钮分配了相同的ID，请不要给不同的元素分配相同的ID。
在您的JavaScript代码中，您总是选择单个元素（单个关闭按钮、单个打开按钮等）。

我会说这是HTML / JS初学者的错误。这样做可以解决问题：

// Get the button that opens the modal
var btn = document.querySelectorAll("button.modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
 btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
 }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
 spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
    }
 }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
     for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";    
     }
    }
}

/* The Modal (background) */
.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: 100%; /* 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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

<h2>1st Modal</h2>

<!-- Trigger/Open The Modal -->
<button class="modal-button" href="#myModal1">Open Modal</button>

<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<h2>2nd Modal</h2>

<!-- Trigger/Open The Modal -->
<button class="modal-button" href="#myModal2">Open Modal</button>

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>