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
    	})
    });
    

      

  • 相关阅读:
    coding++ :局部 Loading 加载效果
    coding++:快速构建 kindeditor 富文本编辑器(一)
    POJ 1265 计算几何 多边形面积 内部格点数 边上格点数
    POJ 1385 计算几何 多边形重心
    POJ 1584 计算几何 凸包
    POJ 2653 计算几何
    POJ 3666 DP
    POJ 2184 DP 01背包+完全背包
    POJ 2392 DP 多重背包
    POJ 1930 数学
  • 原文地址:https://www.cnblogs.com/yongyuandishen/p/14155570.html
Copyright © 2011-2022 走看看