bootstrap 模态对话框

html

<a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
 <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
</a>

模态框

     <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <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="form">
                        {% csrf_token %}
{#                        <input class="hide" type="text" name="fid" id="fid">#}
                        {% for field in form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                                <span class="error-msg">{{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnFormSubmit" type="button" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>

js初始化，以及绑定

 <script>
        $(function () {
            initAddModal();
            bindChangeFileInput();
        });
        function initAddModal() {
            {#在模态框初始化之前会执行此方法#}
            $('#addModal').on('show.bs.modal', function (event) {
              var button = $(event.relatedTarget);
              var recipient = button.data('whatever');
              {#获取到按钮的data-whatever新建文件夹#}
              var modal = $(this);
            {#给到模态框<h4 class="modal-title"></h4>，让模态对话框的标题根据按钮不同更改#}
              modal.find('.modal-title').text('New message to ' + recipient);
              modal.find('.modal-body input').val(recipient);
            })
        }
    </script>