Question

在下面的代码中我想打开一个模态弹出窗口并浏览文件并上传图像。但是当我点击模态弹出按钮时，模态弹出窗口没有打开。我想浏览文件并以模态弹出窗口上传。

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="form" enctype="multipart/form-data" role="form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span>
                            <span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title">Upload Photo</h4>
                    </div>
                    <div class="modal-body">
                        <div id="messages"></div>
                        <input type="file" name="file" id="file">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit"  class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

的JavaScript

$('#form').submit(function (e) {
    var form = $(this);
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData(form[0]);
    }

    var formAction = form.attr('action');

    $.ajax({
        type: 'POST',
        url: 'webForm1.aspx/Insert',
        cache: false,
        data: formdata ? formdata : form.serialize(),
        contentType: false,
        processData: false,
        success: function (response) {
            if (response != 'error') {
                //$('#messages').addClass('alert alert-success').text(response);
                // OP requested to close the modal
                $('#myModal').modal('hide');
                } else {
                $('#messages').addClass('alert alert-danger').text(response);
            }
        }
    });
    e.preventDefault();
});

Answer 1

我测试了你的代码，Bootply的容器部分，我得到了模态窗口。所以你可能错过了一些参考资料。我没有测试你的JavaScript引用，因为Bootply会自动提供这些引用。所以我建议你查看你的JavaScript（jQuery和Bootstrap）参考。另外我注意到你的代码示例没有使用任何CSS。我认为Bootstrap需要在网页上包含CSS文件。

无论如何，这是一个sample template，你可以用它作为指导。我认为你需要至少添加一个Bootstrap CSS文件的链接。

更新了，我首先尝试没有表单部分。我认为你不一定需要使用表单，因为你已经有一个ajax方法调用已经将数据发布到服务器。但是，我会从听力表单提交中更改您的代码：

$('#form').submit(function (e) {

收听保存点击按钮事件：

$( "#save" ).click(function() {

也可以将保存按钮更改为这样：

 <button type="button" id="save" class="btn btn-primary">Save</button>

关于向服务器发送数据，有一个非常useful guide for this。

模态弹出问题

1 个答案: