Bootstrap 3模态对话框和流星

我很自信，所以请温柔。我四处玩弄试图让流星显示的模式对话框，并有一些方法，但我真的坚持在它的显示方式和位置上。Bootstrap 3模态对话框和流星

我有两个模板（如在这里别处建议）为

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

，正如你所看到的，宽度和高度手动弄脏周围，但是这给了我在上一个红色的盒子页面的左下角，右侧有一个空的滚动条，但不是这些示例显示的内容。

任何想法，我哪里会出错？

Peter。

来源

2013-10-23 Peter NUnn

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

<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-23 16:22:46 landland

感谢您的输入landland。不幸的是，这段代码显示了完全相同的行为。生成的模式对话框占据了整个页面。 –

你尝试删除你添加的CSS吗？你也有任何软件包或图书馆，可能会搞乱的CSS？这看起来没问题，我在流星中没有遇到任何麻烦，尽管之前我因为其他库而有模态问题。 – landland

是的，我确实摆脱了CSS不幸的是没有区别。我在这个项目中安装了bootsrap-3，铁路由器和角色。据我所知，我没有使用任何其他库（但可能是，这是相当新的）。 –

你是怎么开始的？

我做了以下时遇到任何问题：

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-24 15:27:22

嗨Varun，我使用bootstrap 3（bootstrap-3软件包）。 –

它看起来好像它一定是一个助推器-3问题。上面的代码，但使用mrt添加bootsrap-3而不是bootstrap会产生我在应用程序中获得的确切效果。覆盖层覆盖整个页面。 –

如果我将id div的类更改为弹出式而不是模态，则会获得与我之后的内容相近的内容（它现在不覆盖整个页面），但它会替换下面的页面而不是显示它（如果这是有道理的）。 –

答案是我错过了两个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视频（引导3教程 - ＃6 - 情态动词（弹出对话框））为把这个路径上......（此处不能嵌入链接，一些原因）。

感谢您的帮助球员。彼得

来源

2013-10-25 09:38:25

Bootstrap 3模态对话框和流星

回答

相关问题