Question

У меня есть этот следующий код для создания диалога подтверждения с помощью JQuery UI:

function Help(section) { 

$("#userpopup").remove(); 
$("body").append("<div id='userpopup' title='Help' style='display:none'></div>"); 

$('#userpopup').dialog({ 
    autoOpen: true, 
    width: 560, 
    height: 500, 
    buttons: { 
     "OK": function() { 
      $(this).dialog("close"); 
      $("#userpopup").remove(); 
     } 
    }, 
    open: function (event, ui) { 
     $("#userpopup").html("<iframe width='100%' height='400' src='?help&section=" + section + "' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe>"); 
    }, 
    beforeClose: function (event, ui) { 
     $("#userpopup").html(""); 
    } 
}); 


return false; 

}

<input onClick="javascript:Help('templates')" type="button" class="btn" value="help"> 

Как изменить его использовать Bootstrap модальности?

Answer 1

Вы можете использовать стандартный Bootstrap модальный разметки ..

<input id="btnHelp" type="button" class="btn" value="help"> 

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">×</button> 
      <h3>Dialog</h3> 
    </div> 
    <div class="modal-body"> 
      <iframe src="" width="100%" height="400" frameborder="0"></iframe> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal">OK</button> 
    </div> 
</div> 

, а затем использовать модальный 'показать' событие динамически установить другой IFrame SRC ..

$('#helpBtn').click(function(){ 

    $('#myModal').on('show', function() { 
     var frameSrc = "?help&section=templates"; // value can be passed from button 
     $('iframe').attr("src",frameSrc); 

    }); 
    $('#myModal').modal({show:true}) 
}); 

Demo of iFrame inside modal

Answer 2

Вы можете посмотреть на Bootstrap jQuery Plugin

Это основано на bootstrap 3.x

Answer 3

Просто добавьте к ответу @Kris Zhang: Bootstrap Jquery Plugin действительно является ответом на это. Вызовы функций такие же, как и в диалоговом окне jquery, но автоматически добавляет div вокруг диалогового окна, чтобы отобразить модальный стиль начальной загрузки. Просто добавьте или украдите библиотеку начальной загрузки из приведенной выше ссылки, и вам не нужно использовать iframes.