如何使用显示变量url的iframe打开引导模式
How to open a bootstrap modal with an iframe that shows variable url
我有一个正常的大型引导模式:
<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">×</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。我想创建一个打开上面模态的函数,但我希望该函数能够更改iframe的src(它是https://google.com),以及链接到实际页面的按钮,作为函数的url参数,以及title(表示google.com),作为函数title参数中的任何内容。我真的不知道该怎么开始。最好的方法是使用document.write(),然后将信息存储在cookie中吗?或者其他方式。
function openModal(url, title) {
//code
}
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">×</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>
相关文章:
- 将IE模拟模式从iframe覆盖到IE8
- 有没有一种方法可以在设计模式下将ng模型或工厂绑定到iframe
- 使用按钮关闭 iframe 模式
- Twitter引导模式-从iframe中获取信息并填充在主页上
- 关闭iframe中的模式弹出窗口
- 如果在iframe中,引导模式弹出将忽略滚动位置
- IFRAME和谷歌应用程序脚本中的NATIVE模式
- 传递数据 id 以引导模式并使用它 iframe url
- 火狐浏览器 iframe 设计模式不起作用
- 从 iframe 内部关闭引导模式,然后转到父页面的特定部分
- 如何在模式弹出窗口关闭时停止 iframe 播放器(并停止播放)
- 如何在IE8模式下模拟Iframe
- 如何使用 iframe 在模式窗口中显示内容
- 当 boostrap 模式在 jQuery 中可见时添加 iFrame
- 某些 YouTube iframe 嵌入在 HTML5 模式下不起作用
- 打开 jquery 模式对话框后,Iframe 内容会丢失
- 将值从模式 iframe 传递到父 iframe
- 通过单击模式 iframe 关闭对话框
- 在Iframe外部的按钮触发的设计模式Iframe中插入文本
- 文档.querySelector对于标准模式iframe在quirks模式父模式下运行是未定义的