引導模態中的Twitter共享按鈕在Firefox上不起作用

Question

我有兩個twitter共享按鈕，一個在主體上，另一個在自舉模式內。

兩個共享按鈕均適用於chrome，但不適用於Firefox。 在Firefox上，位於模式外部的第一個共享按鈕正在工作，但是當我打開模式時，看不到共享按鈕。

是蟲子嗎？ 有沒有解決此問題的方法？

這是我的代碼

https://jsfiddle.net/swarnendu/fb7t0fpe/3/embedded/result/

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <script>
        window.twttr = (function (d,s,id) {
            var t, js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));
    </script>

    <div class="row">
        <a class="twitter-share-button" href="https://twitter.com/intent/tweet" target="_self">Tweet</a>
    </div>

    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

      <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <a class="twitter-share-button"
                 href="https://twitter.com/intent/tweet" target="_self">
                Tweet</a>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>

    </div>

</body>
</html>

Answer 1

它看起來像個錯誤，因為窗口小部件按鈕隱藏在Firefox中，而此CSS由Twitter提供。 但是，我已經找到了解決方法-基本上，您可以自己創建缺少的按鈕。

1）像這樣更改modal-body div的內容：

<div class="modal-body">
    <a href="https://twitter.com/intent/tweet">
        <i class="btn-icon"></i>
        <span class="btn-text">Tweet</span>
    </a>
</div>

2）在您的頁面上添加以下樣式：

.modal-body a .btn-icon{
    position: relative;
    width:60px;
    height: 20px;
    padding: 1px 10px 1px 7px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background-color: #1b95e0;
    border-radius: 3px;
    box-sizing: border-box;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E");
}
.modal-body a .btn-icon:hover{
    background-color:#0c7abf;
}
.btn-text{
    display: inline-block;
    vertical-align: top;
    margin-left: 3px;
}
.modal-body a{
    position: relative;
    height: 20px;
    padding: 5px 14px 5px 6px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background-color: #1b95e0;
    border-radius: 3px;
    box-sizing: border-box;
}
.modal-body a:hover{
    background-color:#0c7abf;
}

3）添加jQuery事件處理程序

$(document).ready(function(){
    $('.modal-body a .btn-icon, .modal-body a').hover(function(){
        $('.modal-body a .btn-icon, .modal-body a')
        .css('background-color', '#0c7abf');
    },
    function(){
        $('.modal-body a .btn-icon, .modal-body a')
        .css('background-color', '#1b95e0');
    })
})

而已。 因此，現在您可以在彈出窗口的FF和Chrome中找到按鈕。 如有必要，可以調整按鈕和圖標的樣式以使其看起來更好。

工作示例： http : //plnkr.co/edit/LPyveKju0zQAELpOzkQW?p=preview

希望這可以幫助。

Answer 2

或者直接使用jQuery克隆按鈕：

$(function() {
  $('#myModal').on('shown.bs.modal', function(e) {
    if ($(".modal-body").find('.twitter-share-button').size())
        return;

    $('.twitter-share-button:first').clone().appendTo('.modal-body');
  });
});

https://jsfiddle.net/jonathanzuniga/k2nk651d/

引導模態中的Twitter共享按鈕在Firefox上不起作用

問題描述

2 個解決方案

解決方案1
1 已采納 2015-12-22 20:38:16

解決方案2
1 2015-12-22 20:58:47

引導模態中的Twitter共享按鈕在Firefox上不起作用

問題描述

2 個解決方案

解決方案1 1 已采納 2015-12-22 20:38:16

解決方案2 1 2015-12-22 20:58:47

解決方案1
1 已采納 2015-12-22 20:38:16

解決方案2
1 2015-12-22 20:58:47