基于bootstrap的弹出框实例

最新推荐文章于 2025-01-27 08:54:14 发布

无风无雨也无晴

最新推荐文章于 2025-01-27 08:54:14 发布

阅读量2.6k

点赞数

分类专栏： jsp

本文链接：https://blog.youkuaiyun.com/weixin_43736692/article/details/87918222

版权

jsp 专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

是否短信预警: 是

收信人

抄送人

主题

账号

							</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>
			</div>
			</br>




			<div style="padding: 5px" class="form-group">
				<label for="name">短信监控弹框配置信息为:</label> <input id="userName"
					required="required" name="userName" type="text"
					class="form-control">
			</div>





		</div>
		<div style="padding: 5px" class="form-group">
			<label for="name">是否手机号预警:</label>
			<button class="btn btn-primary btn-lg" data-toggle="modal"
				data-target="#myModal">是</button>
			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
				aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal"
								aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel">手机号预警方式</h4>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label for="txt_departmentname">收信人</label> <input type="text"
									name="txt_departmentname" class="form-control"
									id="txt_departmentname" placeholder="收信人">
							</div>
							</br>
							<div class="form-group">
								<label for="txt_parentdepartment">抄送人</label> <input
									type="text" name="txt_parentdepartment" class="form-control"
									id="txt_parentdepartment" placeholder="抄送人">
							</div>
							</br>
							<div class="form-group">
								<label for="txt_departmentlevel">主题</label> <input type="text"
									name="txt_departmentlevel" class="form-control"
									id="txt_departmentlevel" placeholder="主题">
							</div>
							</br>
							<div class="form-group">
								<label for="txt_statu">账号</label> <input type="text"
									name="txt_statu" class="form-control" id="txt_statu"
									placeholder="账号">
							</div>
							</br>

						</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>
		</div>
		</br>

		<div style="padding: 5px" class="form-group">
			<label for="name">手机号监控弹框配置信息为:</label> <input id="userName"
				required="required" name="userName" type="text"
				class="form-control">
		</div>


		</br>
	</form>

	<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>保存
		</button>
		<button type="button" class="btn btn-default" data-dismiss="modal">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>修改
		</button>
	</div>
</div>

<script>
	$(function() {
		$('#myModal').modal('hide')
	});
</script>
<script>
	$(function() {
		$('#myModal').on('hide.bs.modal', function() {
			alert('您确定要保存吗...');
		})
	});
</script>