ccc

Bootstrap: Modales

<?php require("modalSlider.php"); ?>
<input type="button" value="abrir Modal" class="esModal" data-toggle="modal" data-target="#modalSlider">


modaSlider.php:
<div id="modalSlider" class="modal-wide modal fade modalSlider-lg" role="dialog" aria-labelledby="modalSliderLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-dialog">
<div  class="modal-content">
<div class="modal-header">
<button type="button" class="close" id="cerrarListaPlantillas" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="labelIndexHTML">Demo</h4>
</div>
<div class="modal-body" id="divIndexHtml"></div>
</div>
</div>
</div>
</div>

CSS:
.modal-wide .modal-dialog { width:95%;  }


<script>
$(function() {
$(".esModal").on("click", function() {
$("#contWhois").html("lo que sea");
});
});
</script>

Abrir un modal desde jquery:
$('#mimodal').modal('show');
Para hacer que el tamaño del modal se ajuste automáticamente al tamaño de la imagen con la que se abre poner en el CSS:
.modal-dialog{ position: relative; display: table; /* This is important */ overflow-y: auto; overflow-x: auto; width: auto; min-width: 300px; }

No hay comentarios:

Publicar un comentario