zoukankan      html  css  js  c++  java
  • bootstrap 模态框 模板 代码

    <!-- 添加员工的模态框 start -->
    <div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title" id="myModalLabel">员工添加</h4>
          </div>
          <div class="modal-body">
          	<!-- 员工添加表单start -->
          	<form class="form-horizontal">
    	    	<div class="form-group">
    				<label for="empName_add_input" class="col-sm-2 control-label">empName</label>
    		    	<div class="col-sm-10">
    		    		<input type="text" class="form-control" name="empName" id="empName_add_input" placeholder="empName">
    				</div>
    			</div>
    			  <div class="form-group">
    				<label for="email_add_input" class="col-sm-2 control-label">email</label>
    			    <div class="col-sm-10">
    			      <input type="email" class="form-control" name="email" id="email_add_input" placeholder="email">
    			    </div>
    			  </div>
    			 <div class="form-group">
    		    	<label class="col-sm-2 control-label">性别</label>
    		      	<div class="radio col-sm-10">
    		      		<label><input type="radio" name="gender" id="gender_add_input1" value="M" checked="checked">男</label>
    		        	<label><input type="radio" name="gender" id="gender_add_input2" value="F">女</label>
    		      	</div>
    			 </div>
    			 <div class="form-group">
    				<label for="deptName_add_input" class="col-sm-2 control-label">deptName</label>
    		    	<div class="col-sm-10">
    		    		<select class="form-control" id="deptName_add_input" name="deptId">
    		    			<option value="">测试部</option>
    		    			<option value="">研发部</option>
    		    		</select>
    				</div>
    			</div>
    		</form>
           	<!-- 员工添加表单end -->
          </div><!-- .modal-body结束 -->
          <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><!-- 添加员工的模态框 end -->
    

      激活方式:

    $("#emp_add_modal_btn").click(function(){
    	$('#empAddModal').modal({
    		backdrop:false
    	})
    });
    

      

  • 相关阅读:
    TF400916错误修复办法
    架构优化
    .net 动态代理的泛型方法支持问题
    解决Kafka-1194问题
    SOA服务总线设计
    SOA初探
    重构心法——提高代码复用率
    重构心法——拆分大对象
    重构心法——你应该这样写方法
    反爬虫那些事儿
  • 原文地址:https://www.cnblogs.com/yongyuandishen/p/14155570.html
Copyright © 2011-2022 走看看