如何使用Bootstrap和jQuery顯示包含Facebook圖像等文本的圖像彈出窗口onclick？

我想顯示圖像的模態彈出窗口。我們有像Facebook這樣的新聞提要。當有人點擊圖片時，它應該顯示一個帶有註釋的模式窗口，比如，共享，標籤等。如何使用Bootstrap和jQuery顯示包含Facebook圖像等文本的圖像彈出窗口onclick？

在Bootstrap或Jquery中是否有可用的插件，或者是否有任何插件可以鏈接到下載源代碼？

來源

2014-05-07 user3610792

請包括您嘗試過的代碼並告訴我們您卡在哪裏。 [我如何問一個好問題]（http://stackoverflow.com/help/how-to-ask） –

我能夠使用bootstrap旋轉木馬，但我沒有得到如何使用其他東西，如添加文本字段，按鈕在旋轉木馬上分享等。 – user3610792

您可以使用引導模式或者其他的jQuery像fancybox

，如果你想添加一些自定義的東西這樣的評論，分享等，那麼你應該使用的引導模式，因爲其他的Jquery可能無法提供您添加這樣更多的自定義的東西所以它更好地設計你自己的模型！

來源

2014-05-07 06:51:05

儘管這個鏈接可能回答這個問題，但最好在這裏包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 – DaImTo

這不是免費的，你可以給一些其他免費的選項。 – user3610792

我會小心這個@DaImTo –

首先在文件中包含bootstrap.css和bootstrap.js（download），然後按照下面的代碼，

現在創建一個鏈接，將在單擊它啓動自舉模式爲

<a href="#modal-id" data-toggle="modal">Modal</a>

現在定義此模式爲，

<div class="modal fade" id="modal-id" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
        <div class="modal-header"> 
         <button id="closeModal" type="button" class="close" data- dismiss="modal" aria-hidden="true">x</button><br> 
        </div> 
        <div class=modal=body> 
         <!--Include anything you want when the popup appears--> 
         <!--Now you can add textboxes as,--> 
         <form> 
          <input type='text' class='form-control'> 
          <button class='btn btn-sm btn-info'>like</button> 
         </form> 
        </div> 
      </div> 
     </div> 
    </div>

來源

2014-05-07 20:02:53

這不適合我嗎？ – user3610792

@ user3610792你確定你已經在你的頁面中正確包含了bootstrap.js和bootstrap.css嗎？ –

是的，我相信我也嘗試了Bootstrap主頁上提供的示例，但它也不起作用。 – user3610792

如何使用Bootstrap和jQuery顯示包含Facebook圖像等文本的圖像彈出窗口onclick？

回答

相關問題