应用错误收集

从另一页面上的链接打开模态内容

时间：2016-09-29 11:23:08

标签： html bootstrap-modal

上午，有人能说清楚我在哪里出错了吗？我正在尝试将index.html上的图像锚定到mainportfolio.html上的模态内容。我在index.html上的链接如下所示：

<div class="col-md-4 col-sm-6">
<a href="mainportfolio2.html#portfolioModal93">
<img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450image.png"></a>
</div>

我想要打开它，这是在mainportfolio2.html：

<div class="portfolio-modal modal fade" id="portfolioModal93" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl">
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-lg-offset-2">
                        <div class="modal-body">
                            <h2>Image</h2>
                            <p class="item-intro text-muted">Example text</p>
                            <p>More example text</p>
                            <img class="img-responsive img-centered" src="img/image1.jpg" alt="">                      
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但是，所有这一切都是因为您被重定向到投资组合页面的顶部。我已经尝试将完整的URL添加到index.html上的链接，这不起作用，我尝试了之间的转发斜杠 “mainportfolio2.html /＃portfolioModal93” 这会产生404错误。这似乎应该很简单，但我无法弄清楚。有人可以帮忙吗？提前谢谢。

1 个答案:

答案 0 :(得分：0)

打开Bootstrap模式是一个javascript事件。你需要添加一些javascript来检测页面应该打开模态，然后实际打开模态。

的index.html

<div class="col-md-4 col-sm-6">
    <a href="http://test.dev/mainportfolio2.html#portfolioModal93">
        <img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450image.png">
    </a>
</div>

mainportfolio2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="portfolio-modal modal fade" id="portfolioModal93" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="close-modal" data-dismiss="modal">
                    <div class="lr">
                        <div class="rl">
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2">
                            <div class="modal-body">
                                <h2>Image</h2>
                                <p class="item-intro text-muted">Example text</p>
                                <p>More example text</p>
                                <img class="img-responsive img-centered" src="img/image1.jpg" alt="">
                                <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {

            // get the current URL
            var url = $(location).attr('href');

            // if the URL ends with the anchor #portfolioModal93 then we want to open the modal
            if(url == 'http://test.dev/mainportfolio2.html#portfolioModal93') {
                $('#portfolioModal93').modal('show');
            }
        });
    </script>
</body>
</html>