我对bootstrap很新，所以请保持温和。我正在玩试图获得一个模态对话框来显示流星并且有一些方法，但我真的被困在它的显示方式和位置。
我有两个模板（如此处其他地方所建议的）用于对话框本身
<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;
}
并且，正如您所看到的那样，手动调整宽度和高度，但这会在页面的左上角给我一个红色框，右侧有一个空的滚动条，但又不是什么示例显示。
我在这里出错的任何想法？
TA
彼得。
答案 0 :(得分：2)
答案是我错过了两个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））将其放在路径上......（由于某种原因无法在此处嵌入链接）。
感谢帮助人员。彼得
答案 1 :(得分：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>
答案 2 :(得分：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>
您使用的是bootstrap 2.3吗？还是引导3？