Бутстрап модальный в MVC, двойной фон - фон, появляющийся дважды

Question

Я заметил проблему, когда порождал bootstrap modal с помощью jQuery. Добавление дополнительного javascript в динамически порожденном частичном представлении (мой модальный) вызывает появление двойного фона. Кто-нибудь знает, почему это происходит? Я использую jquery-1.8.2.js и Bootstrap v3.1.1. Большое спасибо.

App.js

$(document).ready(function() { 

$('.modal-button').on('click', function (e) { 
    // Remove existing modals. 
    $('.modal').remove(); 
    $.ajax({ 
     url: '/Ajax/GetSearchModal/', 
     type: "get", 
     cache: false, 
     success: function (data) { 
      var modal = $(data); 
      $(data).modal({ 
       backdrop: 'static', 
       keyboard: false, 
      }); 
     } 
    }); 
}); 

}); 

Частичный вид (мой модальный)

@model MVCApp.Web.Models.ModalSearchModel 
<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3> 
        Select Something 
       </h3> 
      </div> 
      @using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post)) 
      { 
      <div class="modal-body"> 
       @Html.HiddenFor(m => m.SelectedDropDownID, new { @class  = "select-something-ddl", style = "width:100%", placeholder = "Search..." }) 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" value="Continue">Continue</button> 
       <button type="button" value="Cancel" data-dismiss="modal">Cancel</button> 
      </div> 
      } 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     // This here causes the drop backdrop 

     // select2 code here 
    }); 
</script> 

UPDATE

Перемещение JavaScript из модального обработчику успеха не работал на то, что я Я пытаюсь достичь. Я хочу запустить раскрывающийся список select2. Единственный способ, которым я мог заставить его работать в обработчике успех был со следующим:

  modal.on('shown.bs.modal', function() { 
       $('#SelectedDropDownID').select2({ 
        ajax: { 
         url: '/Ajax/FetchResults/', 
         dataType: 'json', 
         delay: 250, 
         data: function (searchTerm) { 
          return { query: searchTerm }; 
         }, 
         results: function (data) { 
          return { results: data }; 
         } 
        }, 
        minimumInputLength: 2, 
        formatResult: formatRepo, 
        formatSelection: formatRepoSelection 
       }); 

      }); 

Однако, есть задержка в выбор2 активации, так как показано событие не срабатывает до тех пор, модальный не завершил анимировать в экран. Если я запустил код вне показанного события, select2 никогда не активируется.

решаемые

Огромное спасибо как Паша Zavoiskikh и cvrebert. Мне пришлось обновить Bootstrap и jQuery, чтобы установить двойной фон. В дополнение к комментарию Паши, добавляя модальный к телу, прежде чем вызывать select2 fixed select2, не стреляйте. Вот полный фикс:

function formatRepo(item) { 
    var markup = "<table class='item-result'><tr>"; 
    if (item.text !== undefined) { 
     markup += "<div class='item-name' data-jtext=" + item.text + " data-jid=" + item.id + ">" + item.text + "</div>"; 
    } 
    markup += "</td></tr></table>" 
    return markup; 
} 

function formatRepoSelection(item) { 
    return item.text; 
} 


$('.modal-button).on('click', function (e) { 
    // Delete existing modals. 
    $('.modal').replaceWith(''); 
    // Get modal. 
    $.ajax({ 
     url: '/Ajax/GetSearchModal/', 
     type: "get", 
     cache: false, 
     success: function (data) { 
      var modal = $(data); 
      $('body').append(modal); 
      $('#SelectedDropDownID').select2({ 
       ajax: { 
        url: '/Ajax/FetchResults/', 
        dataType: 'json', 
        delay: 250, 
        data: function (searchTerm) { 
         return { query: searchTerm }; 
        }, 
        results: function (data) { 
         return { results: data }; 
        } 
       }, 
       minimumInputLength: 2, 
       formatResult: formatRepo, 
       formatSelection: formatRepoSelection 
      }); 

      modal.modal({ 
       backdrop: 'static', 
       keyboard: false, 
      }); 
     } 
    }); 
}); 

Answer 1

Мои два цента

Для меня не получилось удаления замирание class я закончил делать немного хак

$(document).on("DOMNodeRemoved",".modal-backdrop",function(){ 
    $(".modal-backdrop").remove(); 
}); 

сделал трюк не знаю если есть какие-то последствия для этого, но его рабочая форма меня с классом fade.

Answer 2

Проблема была решена здесь, поставив <div>, содержащий идентификатор, который будет переписан javascript на главной странице, а не частичный вид.

В вашем случае Частичный вид, содержащий Modal будет выглядеть следующим образом:

@model MVCApp.Web.Models.ModalSearchModel 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3> 
        Select Something 
       </h3> 
      </div> 
      @using (Html.BeginForm(Model.Action, Model.Controller, FormMethod.Post)) 
      { 
      <div class="modal-body"> 
       @Html.HiddenFor(m => m.SelectedDropDownID, new { @class  = "select-something-ddl", style = "width:100%", placeholder = "Search..." }) 
      </div> 
      <div class="modal-footer"> 
       <button type="submit" value="Continue">Continue</button> 
       <button type="button" value="Cancel" data-dismiss="modal">Cancel</button> 
      </div> 
      } 
     </div> 
    </div> 

А следующий DIV должен быть размещен на главной странице:

<div id="Ajax-Modal" class="modal fade" aria-hidden="true" role="dialog">