Question

我正在向我正在处理的网站添加类似Facebook和共享按钮的过程。我想要实现的是为投资组合中的每个项目设置L + S按钮，当点击缩略图时，这些按钮显示为模态内容。目前正在发生的是，喜欢或分享的链接不包括模态ID，这意味着整个投资组合页面是链接的，而不是特定的项目。缩略图的html如下所示：

<div class="col-md-4 col-sm-6 portfolio-item">
    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
        <img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450alfa.png" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
    </a>
</div>

与此链接：

<div class="portfolio-modal modal fade" id="portfolioModal1" 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>Alfa</h2>
                            <p class="item-intro text-muted">38mm Nordic Spruce</p>
                            <p>Choose your own name, word or design to be cut from wood. <a href="contact_2.php?subject=Alfa+38mm+Nordic+Spruce">Get in touch</a> to discuss an order like this one</p>
                            <img class="img-responsive img-centered" src="img/may2017/alfa1.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
                            <img class="img-responsive img-centered" src="img/may2017/alfa2.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
                            <img class="img-responsive img-centered" src="img/may2017/alfa3.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
                            <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
                                    <!--LIKE BUTTON-->
                            <div id="fb-root"></div>
                            <script>(function(d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) return;
                            js = d.createElement(s); js.id = id;
                            js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
                            fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));</script>

                            <br> </br>

                            <div class="row text-center">
                            <div class="fb-like" data-href="https://localhost:8888/TTK2/mainportfolio2.html#portfolioModal1" data-width="200px" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div> 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

正如你所看到的，我已经将FB JS粘贴到了div中，我知道这是一种糟糕的做法，但我曾希望这会触发模态ID，但它并没有。您还可以看到我已经在按钮div的data-href字段中获得了包含模式ID的完整地址，但是通过点击生成的任何链接都不包含模态ID，而是链接到原始地址页面，在这种情况下，投资组合。顺便说一下，整个页面的按钮可以正常工作。我唯一能做的就是链接到一个模态。我阅读的文档表明可能无法做到这一点，但我想首先与社区核实。我的意思是，它应该是可能的，对吗？ PS。我知道这段代码链接到本地主机地址，但它也不能在实时情况下工作。谢谢你的期待。

更新 - 已解决。我已经找到了第一部分的解决方案，它可以更改模态内容的URL，以便我可以添加Like和Share按钮。 @forcefield回答了Here。已经在我的100多个隐藏模态div的页面上进行了测试，它完美无缺。谢谢@forcefield！

我可以获取Bootstrap模态内容来生成新网址吗？

0 个答案: