使我的代碼正確

-2

有人可以告訴我，如果我的代碼有問題嗎？使我的代碼正確

我使用bootsrap是js和css文件，在下面的代碼中它應該打開一個對話框，但我不知道它爲什麼不起作用。想確認這裏是否都可以。

<div class="modal fade details-1" id="details-1" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-header"> 
      <button class="close" type="button" data-dismiss="modal" aria-label="close"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      <h4 class="modal-title text-center">Levis Jeans</h4> 
     </div> 
     <div class="modal-body"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-sm-6"> 
         <div class="center-block"> 
          <img src="images/products/men4.png" alt="Levis Jeans" class="details img-responsive"> 
         </div> 
        </div> 
        <div class="col-sm-6"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

來源

2017-01-14 ronaldo cr

你有沒有包括相關的JavaScript到您的網頁？ – Marwelln

是的，我確實....... –

所以，請顯示它。 – tfidelis

你缺少一個包裝。

<div class="modal fade details-1" id="details-1" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button class="close" type="button" data-dismiss="modal" aria-label="close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
       <h4 class="modal-title text-center">Levis Jeans</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="container-fluid"> 
        <div class="row"> 
         <div class="col-sm-6"> 
          <div class="center-block"> 
           <img src="images/products/men4.png" alt="Levis Jeans" class="details img-responsive"> 
          </div> 
         </div> 
         <div class="col-sm-6"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="btn btn-info" data-toggle="modal" data-target="#details-1"> Open</div>

添加div.modal-content.modal-dialog下。

來源

2017-01-14 19:58:16 Saket

親愛的，這是怎麼回事？你可以編輯代碼並使其正確嗎？ –

我已經做到了。看到它在這裏工作：http://bootsnipp.com/snippets/45oV2 – Saket

它工作後，你添加div.modal內容.modal對話框？ –

你忘了添加類<div class="modal-content">，這裏是工作模式

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="row text-center"> 
 
    <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#details-1">Click to open Modal</a> 
 
</div> 
 

 
<div class="modal fade details-1" id="details-1" tabindex="-1" role="dialog" aria-labelledby="details-1" aria-hidden="true"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button class="close" type="button" data-dismiss="modal" aria-label="close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
       <h4 class="modal-title text-center">Levis Jeans</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <div class="container-fluid"> 
 
        <div class="row"> 
 
         <div class="col-sm-6"> 
 
          <div class="center-block"> 
 
           <img src="images/products/men4.png" alt="Levis Jeans" class="details img-responsive"> 
 
          </div> 
 
         </div> 
 
         <div class="col-sm-6"></div> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-01-14 20:06:45 msk

我試過你的代碼但沒有工作親愛的 –

現在檢查我添加了工作示例:) – msk

非常感謝您的寶貴幫助。但另一位用戶爲我做了。再次感謝親愛的 –

使我的代碼正確

回答

相關問題