css - Bootstrap 3 模态对话框和流星

Question

我对引导程序很陌生，所以请温柔一点。我正在尝试让模式对话框与流星一起显示并且有一些方法，但我真的坚持它的显示方式和位置。

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

<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 Tutorials - #6 - Modals (Popup Boxes)）将它放在路径上......（由于某种原因无法在此处嵌入链接）。

谢谢你们的帮助。彼得

Answer 2

你是怎么开始的？

我做了以下并且没有问题：

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？

Answer 3

尝试将整个模态作为模板，而不仅仅是内部。就像是：

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