基于bootstrap的弹出框实例

旧城等待， 2022-04-23 12:58 305阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNjY5Mg_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNjY5Mg_size_16_color_FFFFFF_t_70 1]

是否短信预警: 是

#### 短信预警方式 ####

收信人

抄送人

主题

账号

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNjY5Mg_size_16_color_FFFFFF_t_70]: /images/20220317/0b00709d77ac4579858e5dea876abe3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNjY5Mg_size_16_color_FFFFFF_t_70 1]: /images/20220317/84d6c86f58a54fdebb907720f558bda4.png