3

私のサイトにはいくつかのモーダル ボックスがあり、新しいものを追加しようとしています。既存のボックスにはプレーン テキストしかなく、問題はありませんでした。

新しいものにはモーダル本文に IMG がありますが、ページを更新するとモーダル ボックスが読み込まれ、サイトの上部に表示されます。画像を削除すると、期待どおりに動作します (画像を除く)。

リンクコード:

<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>

モーダル ボックス:

http://jsfiddle.net/wan4q/

助言がありますか？

4

3 に答える 3

6

画像付きの作業モーダルを含むこのリンクを確認してください。

コード：

<head>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css">
</head>

<body>

<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title">Modal title</h4>
    </div>
    <div class="modal-body">
        <img class="img-responsive" src="http://vmatechs.com/wp-content/uploads/2013/07/android.jpg" alt="image" />
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
 </div><!-- /.modal -->  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<body>

画像とテキストを使用した作業モーダルへのこのリンク

于 2013-09-15T14:37:22.543 に答える
1

このコードは完全にうまく機能しています。jquery および bootstrap js ファイルが含まれていない可能性があります

<!doctype html>
<html lang="en">
<head>
 <title>Amit Wecomes you</title>
    <link type="text/css" rel="Stylesheet" href="bootstrap/css/bootstrap.min.css" />    
</head>
<body>
<a href="#clarissa" role="button" data-toggle="modal">Clarissa Bonnel</a>
<!-- Modal -->
 <div id="clarissa" class="modal hide fade" tabindex="-1" role="dialog" aria-   labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-header">
   <h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;   </button></p>
     </div>
     <div class="modal-body">
         <img src="images/amit.jpg" align="left"/>
         I am Clarissa. I am also 34 years old,    half Italian - half French with a little Australian and Romanian twist. I speak 5 languages. My career has been a roller coaster in terms of locations and roles. For more than 11 years, I have lived and worked across the globe, mainly in international organisations, media and professional services, in journalism, sales, client relationship management and event organising. Throughout this journey, I have met a lot of people who have become frustrated because of a mismatch between their goal in life and their current situation without any plan for them to get what they want and deserve.
     </div>
   </div>

   <!-- End Modal -->
<script src="bootstrap/js/jquery.js" type="text/javascript"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>    
</body>
</html>

このコードを使用してください。コンテンツをモーダル内に配置し、正常に動作しています。コードを試すために別の画像を使用しました。

乾杯をお楽しみください!!!

于 2013-09-15T12:09:22.233 に答える
0

画像がブートストラップモーダルのcssを壊した理由について、この回答を何日も探したので、これを含めたかったのです。回答はページ上部のすべてのコメント内に隠され、他の人が探している可能性があるため、これを下部に追加しています。

私にとってうまくいった実際の答えは、Girish Gowda が提供した CSS の変更でした。クレジットが必要な場合は、クレジットを提供したかったのです。

したがって、最終.modalクラスは次のようになります...

.modal {
    left: 20%; 
    right: 20%; 
    top: 10%; 
    bottom: 10%; 
    width: 60%; 
    overflow: auto; 
    position: fixed; 
    z-index: 2000; 
    display: none; 
}

モーダルが画面の左側に表示されていたため、最終的に変更したと言えますが、それ以外は、画像が原因で発生したすべての CSS 混乱の問題が修正されましleft: 20%た。40%答えてくれたGirish Gowdaに感謝します。

于 2015-10-01T22:33:16.970 に答える