Modal Popup Issue

Question

В приведенном ниже коде я хочу открыть модальное всплывающее окно и просмотреть файлы и загрузить images.but, когда я нажимаю кнопку модального всплывающего окна, модальное всплывающее окно не открывается. Я хочу просматривать файлы и загружать их в модальное всплывающее окно.

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.