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>