在模态中打开URL

Question

我正在尝试在bootstrap模式中打开一个链接。我收到了错误

错误

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浏览器。但是，我猜这个错误无论浏览器如何都会保持良好状态。

Answer 1

从Bootstrap3开始，on('show')已被on('show.bs.modal')取代。如果您对代码进行了更改，它应该可以正常工作。