1. ホーム
  2. 質問と答え
  3. ブートストラップを使用してモーダルを表示する際の問題

ブートストラップを使用してモーダルを表示する際の問題

2017-05-30 16 views
1

自分のウェブサイトのコードを使用してブートストラップモーダルウィンドウを使用しようとしています。残念ながら、何らかの理由でウィンドウを使用すると、ウィンドウが正しく機能しません。ブートストラップを使用してモーダルを表示する際の問題

私はこのサンプルを使用：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
    <div class="modal-dialog modal-sm" role="document"> 
     <div class="modal-content"> 
      ...SOME MORE CONTENT HERE... 
     </div> 
    </div> 
</div>

を私が得るすべては色あせた画面で、モーダル自体がどこかのレイアウト上にあると、ブラウザウィンドウ内では見られません。ここで何が問題だろうか？

出典

2017-05-30 JDoeBloke

+0

あなたはcss/jsオーバーライドを行いましたか？ – ThisGuyHasTwoThumbs

+0

あなたは同じもののためにフィドルを追加できますか？ –

+2

コードは正しい（ 'modal-header'、' modal-body'と 'modal-footer'を' modal-content'の下に追加したと仮定します）。 他のCSSがその動作をオーバーライドしているようです。 –

答えて

0 

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<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"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

出典

2017-05-30 10:11:26 Nobita

1

あなたのコードはあなただけでこのチュートリアルをチェックし、コンテンツ

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    
 
    <!-- your button --> 
 
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button> 
 
    
 
    <!-- your modal --> 
 
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
 
    <div class="modal-dialog modal-sm" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      
 
      <!-- I have added content here --> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
    </div> 
 
    </div> 
 
</div> 
 
    
 
    
 
    
 

 
</div> 
 

 
</body> 
 
</html>

出典

2017-05-30 10:21:28 Rahul

関連する問題

 関連する問題