2013-09-25 3 views
1

Я добавляю модально динамически в JS, добавляя его в тело моей страницы, но он не отображается, когда я вызываю следующее.Bootstrap show modal динамически

Это потому, что html добавлен динамически? Если да, то как я могу приложить модальное шоу к событию?

вот мой модальное

<div id="modalId" class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> 
      &times;</button> 
     <h4 class="modal-title"> 
      Detach Site</h4> 
    </div> 
    <div class="modal-body"> 
     <p> 
      Are you sure you wish to detach the following Site Server from this site?</p> 
     <div class="form-group"> 
      <strong id="server-delete-name"></strong> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal"> 
      Close</button> 
     <button id="delete-siteserver" type="button" data-delete-id="" class="btn btn-danger"> 
      Detach</button> 
    </div> 
</div> 

Я добавив этот модальный к телу с помощью $ ('тело') добавляет().

+0

Можете ли вы подробнее объяснить? Как вы добавляете динамический модальный? в каком случае вы вызываете «модальный»? Пожалуйста, напишите больше кода здесь. – devo

+0

Его добавили динамически, поскольку модальный html не существовал в то время. Я добавляю модальный динамически в js – heymega

+0

Где вы вызываете '' $ ('# modalId'). Modal ('show'); ''? – devo

ответ

2

Я использую этот модальный вид. В HTML страницы загружает скелет модальные:

<div id="modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
     </div> 
    </div> 
</div> 

Тогда в моем AJAX, я загружаю содержание модального. Я имею в виду следующее:

<div class="modal-header"> 
    Header content 
</div> 
<div class="modal-body" id="modal-body"> 
    Body content 
</div> 
<div class="modal-footer"> 
    Footer content 
</div> 

И для каждого вызова AJAX, я raplace содержание <div class="modal-content"> с новым результатом.

Надеюсь, это вам поможет.

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