首页html点击一个按钮跳出一个模态框

html点击一个按钮跳出一个模态框

时间: 2023-07-25 18:10:56 浏览: 123

好的，下面是一个简单的 HTML 示例代码，可以通过点击按钮弹出一个模态框： ``` <!DOCTYPE html> <html> <head> <title>Modal Example</title>  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body>  <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">×</button> </div>  <div class="modal-body"> <p>这是模态框的主体内容。</p> </div>  <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> </div> </div> </div> </div>  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> </body> </html> ``` 在这个示例中，我们使用了 Bootstrap 的模态框组件，并通过设置按钮的 `data-toggle` 和 `data-target` 属性来触发模态框的显示。同时，我们还引入了 jQuery 和 Bootstrap 的 JavaScript 文件来实现模态框的交互效果。

阅读全文