bootstrap弹窗可编辑表单
时间: 2023-08-05 22:10:42 浏览: 144
可以通过在Bootstrap弹窗中嵌入一个可编辑表单来实现该功能。以下是一个简单的示例:
```
<!-- 弹窗按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开弹窗
</button>
<!-- 弹窗 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">编辑表单</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputName">姓名</label>
<input type="text" class="form-control" id="inputName" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="inputEmail">邮箱</label>
<input type="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="inputPassword">密码</label>
<input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
```
在上面的示例中,我们在弹窗中嵌入了一个表单,包含了姓名、邮箱和密码三个输入框。用户可以在弹窗中编辑表单内容,并点击保存按钮来保存修改。需要注意的是,在弹窗中使用表单时,需要将表单的提交按钮的 type 属性设置为 button,否则会触发默认的表单提交行为。
阅读全文