bootstrap与模态框

html

<!-- 模态框（Modal） -->
			<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
				<div class="modal-dialog modal-sm">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title">修改密码</h4>
							<span id="showMsg" style="color: red;"></span>
						</div>
						<div class="modal-body">
							<div class="form-group">
								<label class="col-sm-5 control-label">原密码：</label>
								<div class="col-sm-7">
									<input type="password" name="oldPwd" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-5 control-label">新密码：</label>
								<div class="col-sm-7">
									<input type="password" name="newPwd" class="form-control">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-5 control-label">确认密码：</label>
								<div class="col-sm-7">
									<input type="password" name="confirmPwd" class="form-control">
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default personal-edit-closeModal" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary personal-edit-submitModel">确认修改</button>
						</div>
					</div>
				</div>
			</div>

调用html地方

     <button type="button" class="personal-edit-password" data-toggle="modal" data-target=".bs-example-modal-sm">
                                  编辑</button>

data-target 指向上面div的class

<!-- 模态框（Modal） -->
<div class="modal fade bs-example-modal-sm"    其中modal是必须的 fade 可以删掉