Question

我正在使用iframe显示php页面。我在iframe中使用了一个脚本，可以将其调整为文档高度。这允许用户滚动主窗口，而页面上没有双滚动条。我正在iframe中使用引导程序模式来显示图像。问题是，当单击时，模式弹出窗口显示在iframe的顶部中央。但是，如果用户必须在单击“显示图像”按钮之前向下滚动列表，则除非他们知道一直滚动回到顶部，否则他们将找不到弹出窗口。

我一直在这个网站和google中孜孜不倦地寻找解决方案，但没有明确可理解的答案。希望你们中的一位专家能启发我。

这是我的模式代码：

 <div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
        <img id="img" src="" width="100%" >
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

这是脚本：

<script>
$(document).on('click', '.getinfoBtn', function(e){
var image=$(this).attr('data-image');
var name=$(this).attr('data-name');
$('#modal-title').text(name);
$('#img').attr('src', image);
return false;
});

</script>

以下是用于获取要显示内容高度的iframe脚本：

<iframe id="form-iframe" src="rooz/on-tap.php" style="margin-top:20px; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>

<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>

如前所述，此代码有效，但会在iframe的顶部中心弹出图像。我真的希望它要么在单击的按钮附近弹出，要么至少可见。

有没有办法在点击的按钮附近的iframe中放置引导模式弹出窗口？

0 个答案: