引导3模态流星未显示 [英] bootstrap 3 modal in meteor not showing
问题描述
我正在尝试获取bootstrap 3模式以弹出流星应用程序而没有任何成功.一切似乎都准备就绪，我已经在这里和其他地方进行搜索，并且根本无法正常工作.
I'm trying to get a bootstrap 3 modal to pop in a meteor app without any success at all. Everything seems to be in place, I've scoured here and else where and it simply won't work.
HTML是
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in show" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<p> Hi There</p>
<div class="modal-dialog">
<div class="modal-content">
<p> Hi There again</p>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
哪个是通过图片缩略图上的click事件触发的(根据console.log起作用
Which is triggered from a click event on an image thumbnail (which is working according to console.log
试图显示对话框的代码是
The code trying to show the dialog is
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
Session.set("selectedImageId", t.data._id);
console.log("Image ID: "+ Session.get("selectedImageId"));
//var stuff=$('#projectImageModal');
//console.log(stuff);
//stuff.modal('show');
// $('#projectImageModal').modal().modal("show");
$("#projectImageModal").modal("show");
//$('#projectImageModal').modal('show');
//$('.projectImageModal').modal('show');
}
};
在很大程度上直接从cfs-file-handler示例中拉出了该示例(该示例未使用引导程序，而是调用modal().modal("show")版本来弹出该模式).
Which is largely pulled directly from the cfs-file-handler example (which doesn't used bootstrap and calls the modal().modal("show") version to get the modal to pop).
您可以看到我尝试过的变体.控制台显示事件已触发，选择器似乎正在工作，但是模式弹出从不弹出.
You can see the variations I've tried. The console shows that the event is fired, the selector seems to be working but.. the modal NEVER pops.
谢谢.彼得.
推荐答案
我尝试了下面的代码，它可以正常工作.如果将show添加到class="modal fade in"，则立即出现模态.如果不是这种情况，则可能是缺少示例代码中未显示的其他内容.
I have tried the code below and it works as expected. If I add show to class="modal fade in" the modal immediately appears. If in your case it doesn't you are probably missing something else that is not shown in the sample code.
HTML
<head>
<title>modal</title>
</head>
<body>
{{> projectImageItem}}
{{> projectImageModal}}
</body>
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in" id="projectImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
</template>
<template name="projectImageItem">
<input type="button" class="open-modal" value="Show modal." />
</template>
JS
if (Meteor.isClient) {
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
$("#projectImageModal").modal("show");
}
};
}
这篇关于引导3模态流星未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
