Modal Popup Issue

Question

In the below code i want to open a modal popup and browse files and upload images.but when i click modal popup button modal popup is not opening. I want to browse files and upload in modal popup.

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

I tested your code, the container part at Bootply and I got the modal window working. So could it be that you are missing some references. I didn't test your JavaScript references because Bootply provides those automatically. So I would recommend you check your JavaScript (jQuery and Bootstrap) references. Also I noticed that your code sample wasn't using any CSS. I think Bootstrap requires CSS file inclusion on the Web page.

Anyway, here is a sample template that you can use for guidance. I think you need to add at least a link for a Bootstrap CSS file.

Updated, I'd first try without the form part. I don't think you need to use forms necessarily, because you've got an ajax method call posting data to the server already. However, I'd change your code from listening form submission:

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

to listening save click button events instead:

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

also change your save button to look sth like this:

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

In relation sending data to the server, there is a very useful guide for this.