twitter-bootstrap 如何打开一个 url 作为引导模式窗口?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29516475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 22:31:13  来源:igfitidea点击:

How to open a url as a bootstrap modal window?

phpwordpresstwitter-bootstrapmodal-dialog

提问by Yanivn78

I have this line of PHP:

我有这行 PHP:



$STRING .= $b_f.'<a href="'.get_home_url().'/wp-login.php" class="ua5 '.$linkclass.'">'.$CORE->_e(array('head','5','flag_link')).'</a>'.$b_a;


This url opens now as a new webpage. How can i open it as a dialog/modal window instead? In my code i have bootstrap installed.

这个网址现在作为一个新网页打开。如何将其作为对话框/模式窗口打开?在我的代码中,我安装了引导程序。

回答by Slim

Try this "trick":

试试这个“技巧”:

<a href="http://twitter.github.io/bootstrap/" class="btn bootpopup" title="This is title" target="popupModal2">Open modal</a>

<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>

and the js:

和js:

$('.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;

});

Just pass your link to the button's href.

只需将您的链接传递给按钮的href.

DEMO

演示