hbuilderx button 弹出窗口
时间: 2023-09-24 13:06:35 浏览: 371
您可以使用 HBuilderX 中的 Button 组件来创建一个按钮,并通过点击按钮来触发弹出窗口的事件。以下是一个示例代码:
```html
<!-- 引入 HBuilderX 提供的 UI 库 -->
<script src="uni.ui.js"></script>
<!-- 创建一个按钮 -->
<button id="myButton">点击弹窗</button>
<!-- 创建一个弹窗 -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>这是一个弹出窗口。</p>
</div>
</div>
<!-- 在 JavaScript 中添加按钮点击事件的处理函数 -->
<script>
const button = document.getElementById("myButton");
const modal = document.getElementById("myModal");
const closeBtn = document.getElementsByClassName("close")[0];
// 点击按钮显示弹窗
button.onclick = function() {
modal.style.display = "block";
}
// 点击关闭按钮或任意位置关闭弹窗
closeBtn.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
```
请确保将上述代码放置在您的 HTML 文件中,并根据需要进行样式调整。当用户点击按钮时,弹出窗口将显示出来,点击关闭按钮或弹窗外的任意位置都将关闭弹窗。