modal dialog - tamaño - bootstrap 3 modal en meteorito que no muestra
tamaño de ventana modal bootstrap (1)
Estoy tratando de obtener un modal bootstrap 3 para aparecer en una aplicación de meteoritos sin ningún éxito. Todo parece estar en su lugar, lo he recorrido aquí y en otro lugar, y simplemente no funcionará.
El HTML es
<!-- 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>
Que se desencadena a partir de un evento de clic en una miniatura de imagen (que funciona de acuerdo con console.log
El código que intenta mostrar el diálogo es
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'');
}
};
Que se extrae en gran medida directamente del ejemplo cfs-file-handler (que no usa bootstrap y llama a la versión modal (). Modal ("show") para hacer que el modal aparezca).
Puedes ver las variaciones que he probado. La consola muestra que el evento está activado, el selector parece estar funcionando pero ... el modo NUNCA aparece.
Gracias. Peter.
He intentado el código a continuación y funciona como se esperaba. Si agrego show a class="modal fade in" el modal aparece inmediatamente. Si en tu caso no es así, es probable que te falte algo más que no se muestra en el código de muestra.
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");
}
};
}