堆栈内存溢出
  繁体   English   中英

在 HTML 中实现模态弹出窗口

[英]Implementing Modal Popup Window in HTML

 原文  2021-07-15 21:41:17  0   2    javascript/ html/ css

问题描述

我想在我的网站中实现一个类似于这个codepen 的简单模态叠加。 每次单击视图按钮（代码如下）时，我都想创建叠加层。 我有点麻烦，有人可以帮忙吗？ 谢谢

HTML 代码：（我知道我必须从 codepen 添加 css）

<div class="row">
        <div class="col-lg-4">
            <img class="thumbnail" src="image.jpg">
            <div class="box-element product">
                <h6><strong>Title</strong></h6>
                <hr>

                <a class="btn btn-outline-success" href="#">View</a>
                <h4 style="display: inline-block; float: right"><strong>Free!</strong></h4>

            </div>
        </div>
    </div>

2 个解决方案

解决方案1
 0  2021-07-15 22:31:44

正如 Leonardo 所提到的，您需要包含 JavaScript 才能使模态工作。

在 CodePen 中，显然只有一个面板。 但实际发生的是它将面板中的任何内容插入到<body>内的<script> <body> 。

由于您链接到的笔中的 JS 实际上包含 jQuery，因此您必须包含一个单独的<script>来链接到一些承载 jQuery 的 CDN。 您希望将其包含在文档中的模态脚本上方，可能在<head> 。

所以你的 HTML 看起来像这样：

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- other stuff... -->
  </head>
  <body>
    <div class="page-wrapper">
      <!-- your page content here -->
      <button class="trigger">click me</button>
    </div>
    <div class="modal-wrapper">
      <button class="trigger">X</button>
      <p>I am a modal.</p>
    </div>
    <script>
      $(document).ready(function() {
        $('.trigger').click(function() {
          $('.modal-wrapper').toggleClass('open');
          $('.page-wrapper').toggleClass('blur');
          return false;
        });
      });
    </script>
  </body>
</html>

需要注意的一件事：那支笔有一个不好的做法，那就是它使用<a>作为按钮。 相反，您应该使用实际的<button>并使用 CSS 使其看起来像您想要的那样。

解决方案2
 0 已采纳  2021-07-15 22:46:33

我建议您使用特定的<div>进行叠加。

使用类似于以下的结构：

<html>
  <head>
    ...
  </head>
  <body>
    <div class="main-container">
      <p>This is the page main content</p>
    </div>
    <div class="modal-overlay" id="modal-overlay"></div>
    <div class="modal-container">
        <div class="modal-container-controls">
            <button class="modal-container-close-button">Close modal button</button>
        </div>
        <div class="modal-container-content">
            <p><strong>Modal title</strong></p>
            <p>Modal content text 1</p>
            <p>Modal content text 2</p>
        </div>
    </div>
    <script src="js/scripts.js"></script>
  </body>
</html>

因此， modal将是modal的div的id ， modal-overlay将是modal-overlay的div的id 。 在你的代码中，我会有这样的事情：

<div class="row">
    <div class="col-lg-4">
        <img class="thumbnail" src="image.jpg">
        <div class="box-element product">
            <h6><strong>Title</strong></h6>
            <hr>
            <a class="btn btn-outline-success" id="open-modal-button" href="#">View</a>
            <h4 style="display: inline-block; float: right"><strong>Free!</strong></h4>
        </div>
    </div>
</div>
<div id="modal">
    <div id="close-modal-button">Close button</div>
    <div>Modal content</div>
</div>
<div id="modal-overlay"></div>

现在，让我们考虑一下模态的 CSS：

#modal{
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 101;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
}

#modal.modal-visible{
    display: block;
}

如您所见，默认情况下，模态具有display: none属性。 然后，当您单击按钮时，您将添加具有 CSS 属性display:block .modal-visible类。

下一步是为modal-overlay准备 CSS：

#modal-overlay{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8);
}

#modal-overlay.modal-overlay-visible{
    display: block;
}

对行为modal-overlay类似于box-element ：当用户点击open-modal-button ，您的JS代码将添加.modal-overlay-visible类模式叠加<div>元素。

最后，我们来看一个 JS 代码示例：

var openModalButton = document.getElementById("open-modal-button");
var closeModalButton = document.getElementById("close-modal-button");

var modalOverlay = document.getElementById("modal-overlay");
var modal = document.getElementById("modal");

// function that open modal and display the overlay
openModalButton.addEventListener("click", event => {

    modalOverlay.classList.add("modal-overlay-visible");
    modal.classList.add("modal-visible");

});


// function that closes the modal and remove the overlay
closeModalButton.addEventListener("click", event => {

    modalOverlay.classList.remove("modal-overlay-visible");
    modal.classList.remove("modal-visible");

});

希望我的回答可以帮助你:)你可以找到更多关于我的文章在这里，并在GitHub的例子在这里。

我用实时工作片段更新了我的答案： 

 var openModalButton = document.getElementById("open-modal-button"); var closeModalButton = document.getElementById("close-modal-button"); var modalOverlay = document.getElementById("modal-overlay"); var modal = document.getElementById("modal"); // function that open modal and display the overlay openModalButton.addEventListener("click", event => { modalOverlay.classList.add("modal-overlay-visible"); modal.classList.add("modal-visible"); }); // function that closes the modal and remove the overlay closeModalButton.addEventListener("click", event => { modalOverlay.classList.remove("modal-overlay-visible"); modal.classList.remove("modal-visible"); });
 #open-modal-button { width: 150px; display: block; margin: -25px 0 0 -75px; padding: 1em 0; position: absolute; top: 50%; left: 50%; font: 1.125em "Arial", sans-serif; font-weight: 700; text-align: center; text-decoration: none; color: #fff; border-radius: 5px; background: rgba(217, 67, 86, 1); } #modal-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(255, 257, 153, 0.75); visibility: hidden; opacity: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #modal-overlay.modal-overlay-visible { visibility: visible; opacity: 1; } #modal { width: 600px; height: 400px; display: block; margin: 50% 0 0 -300px; position: relative; top: 50%; left: 50%; background: #fff; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #modal.modal-visible { margin-top: -200px; opacity: 1; } .head { width: 90%; height: 32px; padding: 1.5em 5%; overflow: hidden; background: #01bce5; } #close-modal-button { width: 32px; height: 32px; display: block; float: right; } #close-modal-button::before, #close-modal-button::after { content: ""; width: 32px; height: 6px; display: block; background: #fff; } #close-modal-button::before { margin-top: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-modal-button::after { margin-top: -6px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .content { padding: 5%; }
 <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="row"> <div class="col-lg-4"> <img class="thumbnail" src="image.jpg"> <div class="box-element product"> <h6><strong>Title</strong></h6> <hr> <a class="btn btn-outline-success" id="open-modal-button" href="#">View</a> <h4 style="display: inline-block; float: right"><strong>Free!</strong></h4> </div> </div> </div> <div id="modal-overlay"> <div id="modal"> <div class="head"> <a id="close-modal-button" href="javascript:;"></a> </div> <div class="content">Modal content</div> </div> </div> <script src="scripts.js"></script> </body> </html>

在这里你可以找到 Codepen。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML模式弹出窗口 具有自动关闭功能的HTML Javascript模式弹出窗口 html 中的超链接模式弹出 window 的 Onclick 显示模态弹出窗口 窗口退出时的模态弹出窗口 使用Java的模式弹出窗口 将弹出窗口更改为模式窗口 在第三方网站中运行的模式HTML窗口弹出窗口 如何在HTML中创建弹出窗口（模式对话框） 类似于模态窗口的弹出窗口
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM