Question

我在一个正在加载远程内容的网站上有一堆Bootstrap模式窗口。这很完美。但是，我的老板告诉我，这些模态中的链接无法进入新页面，必须在模态窗口中重新加载。

我尝试了一些没有运气的事情。

首先，我在模态

中有模态链接

<a data-toggle='modal' class='modalBox' data-target='#largeModal'
href='link here'>Link</a>

此链接不起作用，Bootstrap.js会抛出此错误..

TypeError: 'undefined' is not a function (evaluating 'b.preventDefault()')

所以我尝试将Id更改为我在页面上的另一个模态窗口，它确实弹出已经存在的模态窗口。这不是我需要的，但很有希望。

有没有解决方法，所以内容可以加载到同一个模态窗口中？

Answer 1

正如@Chevi建议的那样，最好的选择是在模态中放置一个iframe。您无需更改现有的页面/模态布局，因为您可以在每个klick上插入新的iframe。

鉴于你有一个带有.modal-body内部链接的bootstrap模态，你需要这样的东西：

$('.modal').on("click", "a", function (e) {
    var target = $(this).attr('href');
    $('.modal-body').html('');
    $('<iframe>').attr('src', target).appendTo($('.modal-body'));
    e.preventDefault();
});

这会抓取所点击链接的href，用iframe替换.modal-body内容，并将iframe的src设置为链接的href。

请注意，链接目标必须是可框架的：没有帧杀手，没有X-Frame-Options（因此以这种方式链接到谷歌将不起作用！）

小提琴：http://jsfiddle.net/445eA/

Answer 2

Onclick调用javascript函数

<a onclick="loadContent()">Link</a>

调用Javascript函数以使用ajax请求加载数据：

function loadContent()
{
//You can load data using ajax request
$("#modelBodyId").html('Data')
// If you want to open other modal - $('#largeModal").modal('show');
}

Answer 3

我将假设您可以使用jQuery，并且模态中的所有链接都是标准锚标记（<a href="...">Link</a>）

我还将假设这里定义的模态结构：http://getbootstrap.com/javascript/#modals

执行此操作的最简单方法是在链接上配置委托，防止默认，以及在模式正文元素中加载内容。这将需要对模态内容进行最少的修改，避免隔离iframe中的内容（因此打破样式），并且通常是非常干净的解决方案：

jQuery('body').delegate('click', '.modal-body a', function(evt){
    //prevent the browser from navigating to the url for the 'a'
    evt.preventDefault();
    //find the parent that is the "modal-body" of this link
    //load the href html into that parent.
    $(this).parent('.modal-body').load($(this).attr('href'));
});

以上只需要在页面就绪时运行一次，这将处理所有现有和未来的模态。需要注意的是，如果链接转到锚点而不是新页面，这将不起作用（即#somepointinapage），但对于大多数情况，它将运行良好。

Answer 4

这是我采用的解决方案。它适用于：

jQuery v1.11.2
jQuery Migrate v1.2.1
Bootstrap v3.3.1

主页HTML：

<!doctype html>
<html class="no-js" lang="">
<head>

<!-- Your code here -->

</head>
<body>

<ul>
  <li><a href="/page-1" data-target="bs-modal-lg" class="modal-trigger" data-toggle="modal">Modal page #1</a></li>
  <li><a href="/page-2" data-target="bs-modal-md" class="modal-trigger" data-toggle="modal">Modal page #2</a></li>
</ul>

<div class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content"></div>
  </div>
</div>

<div class="modal fade bs-modal-md" tabindex="-1" role="dialog" aria-labelledby="myMediumModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content"></div>
  </div>
</div>

<div class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content"></div>
  </div>
</div>

<!-- Javascript here -->

</body>
</html>

模态页面＃1 HTML：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myLargeModalLabel">Modal page #1</h4>
</div>
<div class="modal-body">
    <ul>       
        <li><a href="/" target="_parent">Main page</a></li>
        <li><a href="/page-2" data-target="bs-modal-md">Modal page #2</a></li>
    </ul>
</div>

模态页面＃2 HTML：

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myLargeModalLabel">Modal page #2</h4>
</div>
<div class="modal-body">
    <ul>       
        <li><a href="/" target="_parent">Main page</a></li>
        <li><a href="/page-1" data-target="bs-modal-lg">Modal page #1</a></li>
    </ul>
</div>

Bootstrap 3模态垂直居中（参见此处http://codepen.io/ahliang85/pen/aFteG/）：

(function($) {
    $.extend({
        adjustModalMaxHeightAndPosition : function(focus) {
            $('.modal').each(function(){
              if($(this).hasClass('in') == false){
                $(this).show();
              };
              var contentHeight = $(window).height() - 60;
              var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
              var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

              $(this).find('.modal-content').css({
                'max-height': function () {
                  return contentHeight;
                }
              });

              $(this).find('.modal-body').css({
                'max-height': function () {
                  return (contentHeight - (headerHeight + footerHeight));
                }
              });

              $(this).find('.modal-dialog').css({
                'margin-top': function () {
                  return -($(this).outerHeight() / 2);
                },
                'margin-left': function () {
                  return -($(this).outerWidth() / 2);
                }
              });
              if($(this).hasClass('in') == false){
                $(this).hide();
              };
            });
        }
    });
})(jQuery);

$(window).resize($.adjustModalMaxHeightAndPosition).trigger("resize");

使用Javascript：

(function($) {
    $('.modal-trigger').click(function(e){
        e.preventDefault();

        var href = $(this).attr('href');    
        var target = $(this).data('target');

        $('.' + target + ' .modal-content').load(href, function(result){
            $('.' + target).modal({show:true});
            $('.' + target).on('loaded.bs.modal', $.adjustModalMaxHeightAndPosition());
        });
    });

    $('.modal').on('click', 'a', function (e) {
        e.preventDefault();

        var href = $(this).attr('href');        
        var target = $(this).data('target');

        $('.' + target + ' .modal-content').html('').load(href, function(result){
            $('.' + target).on('loaded.bs.modal', $.adjustModalMaxHeightAndPosition());
        });
    });
})(jQuery);

在这里http://naturarisponde.it，您可以点击页面底部的“隐私政策”和“Cookie政策”查看工作示例。

Answer 5

只需复制粘贴下面给出的代码即可。您还可以通过更改object和embed标记中的链接来更改重定向的站点。这也可以通过使用iframe而不是嵌入来完成。如果您对此有任何疑问，请发布

<!DOCTYPE html>   
    <html lang="en">   
    <head>   
    <meta charset="utf-8">   
    <title>Modal Window Example</title>   
    <meta name="description" content="Modal Window example using twitter bootstrap">  
    <link href="twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">   
    <script src="twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>  
    <script src="twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>  
    </head>  
    <body>  
        <div class="container">  
            <h2>Example of creating Modals with Twitter Bootstrap</h2>  
            <div id="example" class="modal hide fade in" style="display: none;  max-height: 700px; width:800px;">  
                <div class="modal-header">  
                    <a class="close" data-dismiss="modal">×</a>  
                    <h3></h3>  
                </div>  
                <div class="modal-body">  

                </div> 
                <object data=http://www.biomedcentral.com/1472-6823/14/27/abstract width="800 px" height="900 px"> 
                    <embed http://www.biomedcentral.com/1472-6823/14/27/abstract width="800 px" height="900 px"> </embed> 
                    Error: Embedded data could not be displayed. 
                </object> 
                <div class="modal-footer">  
                    <a href="#" class="btn btn-success">Call to action</a>  
                    <a href="#" class="btn" data-dismiss="modal">Close</a>  
                </div>  
            </div>
            <p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Launch demo modal</a></p>  
        </div>  


    </body>  
    </html>

您必须包含bootstrap-modal.js和bootstraps jquery.js文件。你可以从getbootstrap.com获得

Bootstrap模式中带链接的远程内容

5 个答案: