以模式形式打开网址

时间:2019-02-23 11:39:50

标签: javascript iframe bootstrap-4 bootstrap-modal

我正在尝试以引导程序模式打开链接。我收到错误

错误

jquery-2.1.1.js:2 Uncaught Error: Syntax error, unrecognized expression: https://google.com

这是我要执行的代码-

HTML

<div class="navbar-wrapper">
   <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
         <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">WEBAPPLAYERS</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
               <li><a class="page-scroll" href="#page-top">Home</a></li>
               <li><a class="page-scroll" href="#contact">Contact</a></li>
               <li><a class="page-scroll bootpopup" href="https://google.com" target="popupModal2">Modal Open URL</a></li>
            </ul>
         </div>
      </div>
   </nav>
</div>
<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog">
   <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h3>Title</h3>
   </div>
   <div class="modal-body">
      <iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
   </div>
   <div class="modal-footer">
      <button class="btn" data-dismiss="modal">OK</button>
   </div>
</div>

JS

<script>
$('.bootpopup').click(function () {
    var frametarget = $(this).attr('href');
    var targetmodal = $(this).attr('target');
    if (targetmodal == undefined) {
        targetmodal = '#popupModal';
    } else {
        targetmodal = '#' + targetmodal;
    }
    if ($(this).attr('title') != undefined) {
        $(targetmodal + ' .modal-header h3').html($(this).attr('title'));
        $(targetmodal + ' .modal-header').show();
    } else {
        $(targetmodal + ' .modal-header h3').html('');
        $(targetmodal + ' .modal-header').hide();
    }
    $(targetmodal).on('show', function () {
        $('iframe').attr("src", frametarget);
    });
    $(targetmodal).modal({
        show: true
    });
    return false;
});
</script>

我在整个项目中都在使用Bopotstrap。请问有关如何解决此问题的指导?我正在使用Chrome浏览器。但是,我认为无论使用哪种浏览器,该错误都将保持良好状态。

1 个答案:

答案 0 :(得分:2)

在Bootstrap3中,on('show')已替换为on('show.bs.modal')。如果您在代码中进行了更改,那么它应该可以工作。