html添加按钮触发模态框

水深无声 2022-04-25 01:08 389阅读 0赞

## html添加按钮触发模态框 ##

<div id="addModal" class="modal hide fade" tabindex="-1" role="dialog"
    		aria-labelledby="myModalLabel" aria-hidden="true">
    		
    		
    		<div class="modal-header">
    			<h4 id="myModalLabel">添加信息</h4>
    			<a class="close" data-dismiss="modal" aria-hidden="true"
    				href="javascript:void();">×</a>
    		</div>
    		
    		
    		<div class="modal-body">
    	     	
    			<div class="row cl">
    				<label class="form-label col-xs-3">车间名称：</label>
    				<div class="formControls col-xs-6">
    					<input type="text" class="input-text" placeholder=""
    						name="shopName" id="addshopName" autocomplete="off">
    				</div>
    			</div>
    			<br>
    			
    			<div class="row cl">
    				<label class="form-label col-xs-3">班次状态：</label>
    				<div class="formControls col-xs-6">
    					<select class="form-control " id="addstatus">
    						<option value="1">当前班次</option>
    						<option value="2">历史班次</option>
    					</select>
    				</div>
    			</div>
    			<br>
    			
    	   <div class="row cl">
    		<input type="radio" name="sex" value="male" checked>男
            <input type="radio" name="sex" value="female">女
    	    </div>
    		<br>
    		
          <div class="row cl">
    				<label class="form-label col-3">备注：</label>
    				<div class="formControls col-6">
    					<textarea name="house.remark" id="remark" cols="" rows=""
    						class="textarea" placeholder="最多输入100个字符" datatype="*0-100"
    						dragonfly="true" errormsg="备注不可超过100个字符！"
    						onKeyUp="textarealength(this,100)"></textarea>
    					<p class="textarea-numberbar">
    					<em class="textarea-length">0</em>/100
    					</p>
    				</div>
    			</div>
    			
    			<div class="row cl">
    				<label class="form-label col-xs-3">爱好：</label>
    				<div class="formControls col-xs-6">
    					<input type="checkbox" name="hobby" value="运动">运动
    					<input type="checkbox" name="hobby" value="唱歌">唱歌
    					<input type="checkbox" name="hobby" value="游戏">游戏
    					<input type="checkbox" name="hobby" value="读书">读书
    				</div>
    			</div>
    			<br>
    		</div>
    		
    		
    		<div class="modal-footer">
    			<div class="col-xs-6">
    				<button class="btn btn-primary" id="addConfirm">确定</button>
    			</div>
    			<div class="col-xs-3">
    				<button class="btn btn-primary" data-dismiss="modal"
    					aria-hidden="true">取消</button>
    			</div>
    		</div>
    	</div>

$("#deleteModal").modal("hide");

if ($.trim($("#addshopName").val()) != "") {
    				reqParam['shopName'] = $.trim($("#addshopName").val());
    					}
    					
         
         if ($.trim($("#status").val()) != "") {
    				reqParam['status'] = $.trim($("#status").val());
    			}
    
        
         if ($.trim( $('input[name="sex"]:checked').val()) != "") {
    				reqParam['sex'] = $.trim( $('input[name="sex"]:checked').val());
    			}
    
       
    	/*textarea 字数限制*/
    	function textarealength(obj,maxlength){
    		var v = $(obj).val();
    		var l = v.length;
    		if( l > maxlength){
    			v = v.substring(0,maxlength);
    		}
    		$(obj).parent().find(".textarea-length").text(v.length);
    	}
    	/*获取textarea的值 */
    	     if ($.trim($("#remark").val()) != "") {
    				reqParam['remark'] = $.trim($("#remark").val());
    			}
    
       
       var test=$("input[name=hobby]:checked");
    	var checkBoxValue="";
    	test.each(function(){
    		checkBoxValue+=$(this).val()+"/";		
    	});