1. PingCode智库首页
  2. 百科

js怎么关闭当前模态框

Edit2 • • 百科

js怎么关闭当前模态框

在JavaScript中关闭当前模态框有几种方法，包括使用JavaScript代码直接关闭模态框、使用Bootstrap提供的关闭功能、通过jQuery操作DOM元素等。 其中，使用Bootstrap提供的关闭功能是一种较为常见和方便的方法。下面我们详细介绍如何使用这些方法来实现关闭当前模态框的功能。

一、使用纯JavaScript关闭模态框

使用纯JavaScript可以通过操作DOM元素来关闭模态框。这种方法适用于自定义模态框。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>关闭模态框示例</title>


    <style>


        .modal {


            display: none;


            position: fixed;


            z-index: 1;


            left: 0;


            top: 0;


            width: 100%;


            height: 100%;


            overflow: auto;


            background-color: rgb(0,0,0);


            background-color: rgba(0,0,0,0.4);


        }


        .modal-content {


            background-color: #fefefe;


            margin: 15% auto;


            padding: 20px;


            border: 1px solid #888;


            width: 80%;


        }


        .close {


            color: #aaa;


            float: right;


            font-size: 28px;


            font-weight: bold;


        }


        .close:hover,


        .close:focus {


            color: black;


            text-decoration: none;


            cursor: pointer;


        }


    </style>


</head>


<body>


<h2>JavaScript 模态框示例</h2>


<!-- 触发模态框的按钮 -->


<button id="myBtn">打开模态框</button>


<!-- 模态框 -->


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


    <!-- 模态框内容 -->


    <div class="modal-content">


        <span class="close">&times;</span>


        <p>这是一个示例模态框。</p>


    </div>


</div>


<script>


    // 获取模态框


    var modal = document.getElementById("myModal");


    // 获取按钮，打开模态框


    var btn = document.getElementById("myBtn");


    // 获取 <span> 元素，关闭模态框


    var span = document.getElementsByClassName("close")[0];


    // 当点击按钮时，打开模态框


    btn.onclick = function() {


        modal.style.display = "block";


    }


    // 当点击 <span> (x), 关闭模态框


    span.onclick = function() {


        modal.style.display = "none";


    }


    // 当点击模态框外的区域，关闭模态框


    window.onclick = function(event) {


        if (event.target == modal) {


            modal.style.display = "none";


        }


    }


</script>


</body>


</html>

二、使用Bootstrap关闭模态框

如果你的项目中使用了Bootstrap，那么关闭模态框会更加方便。Bootstrap提供了内置的模态框功能，只需少量的JavaScript代码即可实现。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Bootstrap 模态框示例</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


</head>


<body>


<div class="container">


    <h2>Bootstrap 模态框示例</h2>


    <!-- 触发模态框的按钮 -->


    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">


        打开模态框


    </button>


    <!-- 模态框 -->


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


        <div class="modal-dialog">


            <div class="modal-content">


                <!-- 模态框头部 -->


                <div class="modal-header">


                    <h4 class="modal-title">模态框标题</h4>


                    <button type="button" class="close" data-dismiss="modal">&times;</button>


                </div>


                <!-- 模态框主体 -->


                <div class="modal-body">


                    这是一个Bootstrap模态框。


                </div>


                <!-- 模态框底部 -->


                <div class="modal-footer">


                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>


                </div>


            </div>


        </div>


    </div>


</div>


</body>


</html>

三、使用jQuery关闭模态框

结合jQuery，你可以更方便地操作DOM元素，关闭模态框。

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>jQuery 模态框示例</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


</head>


<body>


<div class="container">


    <h2>jQuery 模态框示例</h2>


    <!-- 触发模态框的按钮 -->


    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">


        打开模态框


    </button>


    <!-- 模态框 -->


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


        <div class="modal-dialog">


            <div class="modal-content">


                <!-- 模态框头部 -->


                <div class="modal-header">


                    <h4 class="modal-title">模态框标题</h4>


                    <button type="button" class="close" data-dismiss="modal">&times;</button>


                </div>


                <!-- 模态框主体 -->


                <div class="modal-body">


                    这是一个jQuery模态框。


                </div>


                <!-- 模态框底部 -->


                <div class="modal-footer">


                    <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>


                </div>


            </div>


        </div>


    </div>


</div>


<script>


    $(document).ready(function(){


        // 使用 jQuery 关闭模态框


        $(".close").click(function(){


            $("#myModal").modal('hide');


        });


    });


</script>


</body>


</html>

四、总结

通过以上方法，你可以根据项目需求选择合适的方式来关闭当前模态框。对于自定义模态框，可以使用纯JavaScript进行操作；如果项目中使用了Bootstrap，推荐使用Bootstrap提供的功能来实现；而结合jQuery，可以更加方便地操作DOM元素。无论使用哪种方法，掌握如何操作DOM元素和事件处理是前提。

相关问答FAQs：

1. 如何在JavaScript中关闭当前模态框？

  • 问题：怎样使用JavaScript关闭当前打开的模态框？
  • 回答：要关闭当前模态框，可以使用以下代码：document.getElementById('myModal').style.display = 'none';。其中，myModal是你当前打开的模态框的ID。通过将display属性设置为none，可以隐藏模态框并关闭它。

2. 怎样通过点击按钮关闭当前模态框？

  • 问题：我想通过点击按钮来关闭当前打开的模态框，应该怎样实现？
  • 回答：要通过点击按钮关闭当前模态框，可以使用以下代码：document.getElementById('closeButton').addEventListener('click', function() { document.getElementById('myModal').style.display = 'none'; });。其中，closeButton是你点击关闭的按钮的ID，myModal是当前打开的模态框的ID。通过监听按钮的点击事件，在点击时将模态框隐藏并关闭。

3. 如何在JavaScript中使用函数关闭当前模态框？

  • 问题：我想在JavaScript中定义一个函数来关闭当前打开的模态框，应该怎样实现？
  • 回答：要使用函数关闭当前模态框，可以先在JavaScript中定义一个关闭模态框的函数，如下所示：
function closeModal() {
  document.getElementById('myModal').style.display = 'none';
}

然后，在需要关闭模态框的地方调用该函数即可，如：closeModal();。这样，模态框就会被隐藏并关闭。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3915409

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部