css - Bootstrap 3 模态对话框和 meteor

Question

我是 bootstrap 的新手，所以请多多关照。我正在尝试让一个模式对话框与 meteor 一起显示并且有一些方法，但我真的坚持它的显示方式和位置。

我有两个用于对话框本身的模板(如此处其他地方所建议的)

<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;                                                                                   
}

并且，如您所见，手动修改了宽度和高度，但这在页面的左上角给了我一个红色框，在右侧下方有一个空滚动条，但又不是什么示例显示。

有什么我在这里出错的想法吗？

他

彼得。

Answer 1

答案是我缺少两个 div 来让事情变得愉快。

我需要一个

<div class="modal-dialog"> 
<div class="modal-content">

使代码弹出为模态对话框。完整的测试代码是

<template name="projectPage">                                                                                 
<div class="container">                                                                                   
  <div class="well">
  <h2>Example of creating Modals with Twitter Bootstrap</h2> 
  <a data-toggle="modal" href="#myModal" >My Modal</a>                                                                                                                                                               
</div>
</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-dialog">                                                                                
<div class="modal-content">                                                                               
<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>
</div>
</div>

感谢 youtube 视频(Bootstrap 3 教程 - #6 - 模式(弹出框))将其放在路径上......(由于某种原因无法在此处嵌入链接)。

谢谢大家的帮助。彼得