самозагрузки 3 модальный диалог не делает, как это должно

я следующий код яваскриптасамозагрузки 3 модальный диалог не делает, как это должно

$("#modal-yes-button").click(function(){ 
    $("#myModal").modal('hide'); 
    $(".modal-body").load('/url/that/returns/an/html/'); 
    $("#myModal").modal('show'); 
});

и следующие модальные

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 

      </div> 
      <div class="modal-body"> 
       <h3>This is a question answer yes or later</h3> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Maybe Later</button> 
       <button id="modal-yes-button" class="btn btn-info" aria-hidden="true">Yes</button> 

      </div> 
     </div><!--modal-content--> 
    </div><!--modal-dialog--> 
</div><!--myModal-->

Я хочу usere нажать кнопку да скрыть модальность (его говорит, что bootstrap не позволит открывать модальный, когда другой открыт) загрузите новый html-контент для .modal-body и снова обманите модальный диалог. Только то, что я получаю, это черный экран (например, когда он тени для модального отображения), но модальный никогда не появляется. Я играл с ним с помощью средства разработки хром и модальный появляется обычно

хром DEV-инструменты

modaldialog = $("#myModal"); 
modaldlgBody = $(".modal-body"); 
modaldlgBody.load('/url/that/returns/html/'); 
modaldialog.modal('show');

С учетом указанных выше команд новый новый «тело» загружается нормально. Но если я сначала попытаюсь загрузить диалог, а затем нажмите кнопку «да», даже когда вы запускаете модальную версию из hrome dev-tools, я получаю то же поведение, черный экран. Что может быть неправильным?

хром DEV-инструменты, дающие тот же черный экран

modaldialog = $("#myModal"); 
modaldialog.modal('show'); 
#pressing yes gets me the same black screen.

источник

2013-12-04 Apostolos

Как предположил пользователь (который удалил свой комментарий) я показываю страницу после Аякса ('/ url/that/returns/html /', function() { $ ("# myModal"). modal ('show'); }); и работает отлично. Но теперь у него такое же поведение, когда я нажимаю кнопку Maybe Later. Распространяет модальность, но я не возвращаюсь на свою страницу, но я просто получаю черную затененную страницу, такую как модальный, без содержания. – Apostolos

Во-первых, вы должны ждать закрытия анимации закончить до открытия ваш диалог.

Вы можете слушать hidden.bs.modal события:

$('#myModal').on('hidden.bs.modal', function(){ 
    $('#myModal').modal('show'); 
});

Теперь это будет трещать назад свой модальный каждый раз, когда вы закрываете его, даже при нажатии на кнопку «распускать». Вы хотите прослушать это событие только один раз, когда пользователь нажимает кнопку «Да». Вы можете воспользоваться jQuery.one() вяжущего:

$('#modal-yes-button').click(function(){ 
    $('#myModal').one('hidden.bs.modal', function(){ 
     $('#myModal').modal('show'); 
    }); 
    $('#myModal').modal('hide');  
});

fiddle

Но я не вижу хороший повод, чтобы сохранить тот же самый диалог открытия - она включает в себя кнопку «Да» с конкретным логика, которой необходимо будет изменить после завершения загрузки ...

Вы можете служить полный диалог, используя $.get, а просто показать, что:

$('#modal-yes-button').click(function(){ 
    $('#myModal').modal('hide'); 
    $.get(url, function(html){ 
     //html should contain a complete modal markup, including 
     // .modal, .modal-header, .modal-body ... 
     var $dlg = $(html); 
     // if needed, add specific handlers : 
     $dlg.on('click', '#whatever', function(){ /*do stuff*/ }); 
     $dlg.appendTo('body').modal('show'); 
    }); 
});

источник

2013-12-04 10:31:47 LeGEC

Лучше ли загружать совершенно новый модальный текст вместо редактирования старого? – Apostolos

Я все еще получаю один фон слева, должен ли я использовать ваше прослушивание для события hide, даже если я использую метод get для вызова целого нового диалога? – Apostolos

Я все еще получаю два div div, когда я использую в любом случае, даже если я использую один метод. – Apostolos

Так оно и было. Я должен был выполнить код

$dlg.appendTo('body'); 
$("#id_of_new_modal").modal('show');

вместо

$dlg.appendTo('body').modal('show');

Я не совсем уверен, почему это так. Я думал, что использование $ - объект jquery, поэтому

$dlg.appendTo('body').modal('show');

должно было сработать. Но это не так. Если у вас есть какие-либо идеи, пожалуйста, прокомментируйте, что мне нравится знать, почему в вещах :)

источник

2013-12-04 13:18:05 Apostolos

Правильный ответ должен быть размещен в верхней части документа.

непосредственно перед тегом тела заканчивается или сразу после начала тела тега, может быть только один уровень вложенности

<body> 
<div> 
    <!-- no other nesting --> 
    <!-- put modal here --> 
    <div class="modal fade"> 
    <div class="modal-dialog"> 
    <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">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
      <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
     </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
    </div><!-- .modal --> 
    </div><!-- first div end here -->  
     </body>

источник

2015-05-18 13:07:42

самозагрузки 3 модальный диалог не делает, как это должно

ответ

Смежные вопросы