Register
> 博客>

html点击弹窗代码

新星源码网 2月 11日 2 0 

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击弹窗示例</title>
    <script>
        function showAlert() {
            alert("您点击了按钮！");
        }
    </script>
</head>
<body>

<button onclick="showAlert()">点击我弹出提示框</button>

</body>
</html>

这个代码创建了一个按钮，当用户点击按钮时，会触发 showAlert() 函数，该函数使用 alert() 方法弹出一个提示框，显示一条消息："您点击了按钮！"

如果你想要更加自定义弹窗的外观和交互方式，你可以使用一些 JavaScript 库，比如 jQuery UI 或者 Bootstrap。这些库提供了丰富的组件和样式，可以轻松创建弹窗和对话框。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击弹窗示例</title>
    <!-- 引入 Bootstrap 样式 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  点击我弹出模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">提示</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        您点击了按钮！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 引入 Bootstrap 的 JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

这个示例使用了 Bootstrap 框架，创建了一个按钮和一个模态框。点击按钮会触发模态框的显示，模态框显示了一条消息："您点击了按钮！"。

Related

热门文章

微海报