有几个带有隐藏输入的按钮。当用户单击按钮时,它必须显示一个带有 div
block 和 iframe
的弹出窗口。其内容的 URL 应由地址 + 隐藏输入的值组成。
要显示的 block 是:
<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>
但是iframe
的src
属性值必须由http://ip-score.com/checkip/
+ ip (来自隐藏的输入)。
<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>
这是我的代码:
<a id='pop' data-toggle='popover' data-trigger='focus'>
Check
<input id='ip_id' type='hidden' value='94.45.43.42'>
</a>
<a id='pop' data-toggle='popover' data-trigger='focus'>
Check
<input id='ip_id' type='hidden' value='83.218.164.204'>
</a>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle=popover]').popover({
content: function() {
return $(this).children("#ip_id").val();
},
placement: 'bottom'
});
});
</script>
最佳答案
一方面,您的标记会很糟糕,因为您有重复的 id 属性。但你的问题的答案很简单。基本上,您只需从 name="ip_id"的子元素中检索值,并在模式内操作 iframe 的 SRC 属性,然后显示它。我还没有测试过这个,但尝试一下:
<a class='pop'>
Check
<input name='ip_id' type='hidden' value='94.45.43.42'>
</a>
<a class='pop' data-toggle='popover' data-trigger='focus'>
Check
<input name='ip_id' type='hidden' value='83.218.164.204'>
</a>
<div class="modal fade" id="popWin">
<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">×</span></button>
<h4 class="modal-title">
Popup
</h4>
<div id="err"></div>
</div>
<div class="modal-body">
<iframe id="formWin" src="" style="width:500px; height:500px; border:0px; overflow: hidden; scrolling="yes">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
$(document).ready(function(){
$('.pop').click(function(){
var srcVal = 'http://ip-score.com/checkip/' + $(this).find('[name="ip_id"]').val()
$('#formWin').attr('src', srcVal);
$('#popWin').modal('show');
});
});
</script>
更新:这就像罪恶一样丑陋,但既然你要求它,这行得通:
$(document).ready(function(){
var src = 'http://ip-score.com/checkip/'+$(this).children("#ip_id").val();
$('[data-toggle=popover]').popover({
html : true,
content: function () {
return $('<iframe height="200" width="200"></iframe>').attr('src', src)
},
placement: 'bottom'
});
});
关于javascript - 在 Bootstrap 弹出窗口中显示 iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29284403/