Question

有几个带隐藏输入的按钮。当用户点击某个按钮时，它必须显示带有div块的弹出窗口，其中包含iframe。其内容的URL应该来自隐藏输入的地址+值。

要显示的块是：

<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的{{1}}属性值必须包含src + ip（来自隐藏输入）。

http://ip-score.com/checkip/

这是我的代码：

<div id="myPopoverContent">
<div id="outerdiv">
<iframe src="http://ip-score.com/checkip/94.45.43.42" id="innerIframe" scrolling="no"></iframe>
</div>
</div>

JsFiddle

Answer 1

首先，你的标记会很糟糕，因为你有重复的id属性。但问题的答案非常简单。基本上你只是从子元素中检索值=＆＃34; ip_id＆＃34;并在模态内操纵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">&times;</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'
});
});

JSFiddle

在Bootstrap弹出窗口中显示iframe

1 个答案: