0

私はブートストラップにかなり慣れていないので、優しくしてください。私は流星で表示するモーダルダイアログを取得しようとして遊んでいて、何らかの方法がありますが、表示方法と場所に本当にこだわっています。

ダイアログ自体には2つのテンプレートがあります（ここの他の場所で提案されているように）

<template name="projectPage">                                                                             

<div class="container">                                                                                   
  <h2>Example of creating Modals with Twitter Bootstrap</h2>                                              
  <div id="example" class="modal fade in show" role="dialog" tabindex="-1" aria-hidden="true">            
    {{> modalInner}}                                                                                      
  </div>                                                                                                  
</div>>                                                                                                   
</template>                                                                                               

<template name="modalInner">                                                                              
<div class="modal-header">                                                                                
  <a class="close" data-dismiss="modal">×</a>                                                             
  <h3>This is a Modal Heading</h3>                                                                        
</div>                                                                                                    
<div class="modal-body" >                                                                                 
  <h4>Text in a modal</h4>                                                                                
  <p>You can add some text here.</p>                                                                      
</div>                                                                                                    
<div class="modal-footer">                                                                                
  <a href="#" class="btn btn-success">Call to action</a>                                                  
  <a href="#" class="btn" data-dismiss="modal">Close</a>                                                  
</div>                                                                                                    
</template>

このコードでは、テンプレートがレンダリングされますが、背景が不透明であるため、その下に既にレンダリングされているものに混ざり合っています (例が示すサイズではなく、フルスクリーンでもあります)。

cssで何が起こっているのかを確認するために背景を変更してみました

.modal {
  //background-color: #f00;                                                                               
  max-width: 50%;                                                                                         
  max-height: 50%;                                                                                        
  //position: relative;                                                                                   
}

ご覧のとおり、幅と高さを手動でいじっていますが、これにより、ページの左上隅に赤いボックスが表示され、右側に空のスクロールバーが表示されますが、例が示しているものとは異なります.

ここで私が間違っているアイデアはありますか？

タ

ピーター。

4

3 に答える 3

0

どのように始めましたか？

私は次のことを行いましたが、問題はありません。

meteor create bootstrap
mrt add bootstrap

<head>
  <title>Bootstrap Modal</title>
</head>

<body>
<br />
    <div class="container">
    <div class="well">
    {{> projectPage}}
    </div>
    </div>
</body>

<template name="projectPage">                                                                             

<div class="container">                                                                                   
  <h2>Example of creating Modals with Twitter Bootstrap</h2>                                              
  <div id="example" class="modal fade in show" role="dialog" tabindex="-1" aria-hidden="true">            
    {{> modalInner}}                                                                                      
  </div>                                                                                                  
</div>>                                                                                                   
</template>                                                                                               

<template name="modalInner">                                                                              
<div class="modal-header">                                                                                
  <a class="close" data-dismiss="modal">×</a>                                                             
  <h3>This is a Modal Heading</h3>                                                                        
</div>                                                                                                    
<div class="modal-body" >                                                                                 
  <h4>Text in a modal</h4>                                                                                
  <p>You can add some text here.</p>                                                                      
</div>                                                                                                    
<div class="modal-footer">                                                                                
  <a href="#" class="btn btn-success">Call to action</a>                                                  
  <a href="#" class="btn" data-dismiss="modal">Close</a>                                                  
</div>                                                                                                    
</template>

ブートストラップ 2.3 を使用していますか? それともブートストラップ3？

于 2013-10-24T15:27:22.267 に答える
0

内部だけではなく、モーダル全体をテンプレートとして配置してみてください。何かのようなもの：

<template name="projectPage">                                                                                 
<div class="container">                                                                                   
  <h2>Example of creating Modals with Twitter Bootstrap</h2> 
  <a data-toggle="modal" href="#myModal" >My Modal</a>                                                                                                                                              
</div>
{{>myModal}}                                                                                                  
</template> 

<template name="myModal">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-header">                                                                                
  <a class="close" data-dismiss="modal">×</a>                                                             
  <h3>This is a Modal Heading</h3>                                                                        
</div>                                                                                                    
<div class="modal-body" >                                                                                 
  <h4>Text in a modal</h4>                                                                                
  <p>You can add some text here.</p>                                                                      
</div>                                                                                                    
<div class="modal-footer">                                                                                
  <a href="#" class="btn btn-success">Call to action</a>                                                  
  <a href="#" class="btn" data-dismiss="modal">Close</a>                                                  
</div>  
</div><!-- /.modal -->
</template>
于 2013-10-23T16:22:46.447 に答える