在每次点击按钮后,我想显示一张带有空白输入框的modal,js代码该怎么写
时间: 2024-05-05 21:18:54 浏览: 12
以下是一个简单的示例代码,可以在每次点击按钮后显示一个带有空白输入框的 modal:
```
// 获取按钮元素
const button = document.querySelector('#my-button');
// 添加点击事件监听器
button.addEventListener('click', () => {
// 获取 modal 元素
const modal = document.querySelector('#my-modal');
// 显示 modal
modal.style.display = 'block';
});
```
在上面的代码中,我们首先通过 `document.querySelector` 方法获取到我们的按钮元素,然后添加一个点击事件监听器。每当用户点击按钮时,监听器会执行一个函数。函数内部会获取 modal 元素,并将其显示出来(通过将 `style.display` 设置为 `"block"`)。
当然,这只是一个简单的示例代码,实际中你可能需要做更多的工作来创建一个完整的 modal,比如添加关闭按钮、防止用户在 modal 外部点击等等。但总的来说,以上代码应该可以帮助你完成最基本的功能。
相关问题
如何使vue-js-modal模态框点击空白处不关闭弹窗的具体代码
以下是vue-js-modal模态框点击空白处不关闭弹窗的代码:
```javascript
<template>
<modal name="modal-name" :click-to-close="false">
<!-- Modal content here -->
</modal>
</template>
```
其中,`:click-to-close="false"`表示点击空白处不关闭弹窗。
注意,在实际代码中,“modal-name”应替换为您自己的模态框名称,且必须先安装并引入vue-js-modal组件库。
你帮我写一个带有费率代码输入框,结算日期的日期选择器,靠泊日期的日期选择器,箱型的输入框,并且与Bootstrap Modal 组件结合,标题是筛选条件
好的,以下是一个简单的HTML代码示例,包含费率代码输入框、结算日期的日期选择器、靠泊日期的日期选择器以及箱型的输入框,并且结合了Bootstrap Modal 组件,标题是筛选条件:
```html
<!-- 按钮触发模态框的HTML代码 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
打开筛选条件
</button>
<!-- 模态框的HTML代码 -->
<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="filterModalLabel">筛选条件</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="rateCodeInput">费率代码</label>
<input type="text" class="form-control" id="rateCodeInput" placeholder="输入费率代码">
</div>
<div class="form-group">
<label for="settlementDateInput">结算日期</label>
<input type="date" class="form-control" id="settlementDateInput">
</div>
<div class="form-group">
<label for="arrivalDateInput">靠泊日期</label>
<input type="date" class="form-control" id="arrivalDateInput">
</div>
<div class="form-group">
<label for="containerTypeInput">箱型</label>
<input type="text" class="form-control" id="containerTypeInput" placeholder="输入箱型">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">查询</button>
</div>
</div>
</div>
</div>
```
您可以将此示例代码复制粘贴到您的HTML文件中,并根据需要进行修改。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)