boostrap 模態框

1：html代碼：

      

 <button type="button" class="btn btn-default btn-xs big-btn" id="btnAddGoods" onclick="addGoods()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加
</button>
  
<div class="modal fade" id="addpic" tabindex="-1" role="dialog" aria-labelledby="myAddpicModal">
<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">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">活動責任人</h4>
</div>
<div class="modal-body">
<form id="formAddpic" method="post" class="form-horizontal" action="${pageContext.request.contextPath}/activity/addpic.shtml">
<div class="form-group">
<label for="picName" class="col-lg-3 control-label">姓名:</label>
<div class="col-lg-5">
<input type="text" class="form-control" id="picName" name="picName" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="picDepartment" class="col-lg-3 control-label">部門:</label>
<div class="col-lg-5">
<input type="text" class="form-control" id="picDepartment" name="picDepartment" placeholder="部門">
</div>
</div>
<div class="form-group">
<label for="picPhone" class="col-lg-3 control-label">手機:</label>
<div class="col-lg-5">
<input type="text" class="form-control" maxLength="11" id="picPhone" name="picPhone" placeholder="手機">
</div>
</div>
<div class="form-group">
<label for="picEmail" class="col-lg-3 control-label">郵箱:</label>
<div class="col-lg-5">
<input type="email" class="form-control" id="picEmail" name="picEmail" placeholder="郵箱">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="setpicbtn" class="btn btn-primary">確認</button>
<button type="button" onclick="$('#addpic').modal('hide');" class="btn btn-info">取消</button>
</div>
</div>
</div>

2:js代碼

    

function addGoods(){
    var $modal = $("#addpic");
    $modal.modal("show");
}
</script>