Как открыть загрузочную модальность с IFRAME, который показывает переменная URL

Question

У меня есть нормальная большая самозагрузка модальность:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <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" id="myModalLabel>Google.com</h4> 
     </div> 
     <div class="modal-body"> 
     <iframe src="https://google.com" width="90%" height="90%" frameborder="0" allowtransparency="true"></iframe> 
     </div> 
     <div class="modal-footer"> 
     <a type="button" class="btn btn-primary" href="https://google.com" target="_blank">Go to actual page</a> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 

, который содержит Iframe. Я хочу создать функцию, которая открывает вышеописанный модальный, но я хочу, чтобы функция имела возможность изменить src iframe (это https://google.com), а также кнопку, которая ссылается на фактическую страницу, чтобы быть URL-адресом параметр функции и заголовок (который говорит google.com), чтобы быть тем, что находится в параметре title функции. Я не знаю, как начать с этого. Будет ли лучший способ использовать document.write(), а затем сохранить информацию в файлах cookie? или каким-либо другим способом.

function openModal(url, title) { 
    //code 
} 

Answer 1

function openModal(url, title) { 
 
    $('#myModalLabel').text(title); 
 
    $('.modal-body iframe').attr('src', url); 
 
    $('#myModal').modal('show'); 
 
} 
 

 
$('button').click(function() { 
 
    openModal('http://www.bing.com/', 'bing.com'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
    <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" id="myModalLabel">Google.com</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <iframe src="https://google.com" width="90%" height="90%" frameborder="0" allowtransparency="true"></iframe> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <a type="button" class="btn btn-primary" href="https://google.com" target="_blank">Go to actual page</a> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    <!-- /.modal-content --> 
 
    </div> 
 
    <!-- /.modal-dialog --> 
 
</div> 
 

 
<button>Open Modal</button>