bootstrap modal模态框的使用笔记

注意使用modal的时候最外层多套了一个div，因为如果一个页面定义两个modal时，另一个弹不出来，原因不明。
js显示弹窗

$("#listModal").modal({backdrop:false});

html定义弹窗

<!-- 模态框（Modal） -->
    <div>
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">手续费配置</h4>
                </div>
                
                    <div class="modal-body">
                        <form class="form-horizontal" id="form_data" action="${ctx}/fee/update.shtml">
                            <div class="form-group">
                                <label for="inputName" class="col-sm-3 control-label">渠道:</label>
                                <input type="hidden" name="id"> 
                                <input type="hidden" name="channelId"> 
                                <div class="col-sm-5">
                                    <input type="text" class="form-control input-sm" name="channel_name" readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">金额:</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control input-sm" name="amount" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputName" class="col-sm-3 control-label">文案:</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control input-sm" name="copyWriter" >
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputName" class="col-sm-3 control-label">有效期至:</label>
                                <div class="col-sm-5">
                                    <input type="text" class="form-control input-sm" name="validDate" id="datepicker">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="validateBtn" type="submit" class="btn btn-primary">提交更改 </button>
                    </div>
                
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

效果图

form使用相关链接至