javascript - hacer - ventana modal bootstrap ejemplo
¿Cómo puedo cambiar el ancho predeterminado de un cuadro modal de Twitter Bootstrap? (30)
Intenté lo siguiente:
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id=''dialog-heading''></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
Y este Javascript:
$(''.modal-admin'').css(''width'', ''750px'');
$(''.modal-admin'').css(''margin'', ''100px auto 100px auto'');
$(''.modal-admin'').modal(''show'')
El resultado no es lo que esperaba. La parte superior izquierda modal se coloca en el centro de la pantalla.
Alguien puede ayudarme. Alguien más ha intentado esto. Supongo que no es una cosa inusual querer hacer.
Agregue lo siguiente en su archivo css
.popover{
width:auto !important;
max-width:445px !important;
min-width:200px !important;
}
Al modificar el model-dialog clase puede lograr el resultado esperado. Estos pequeños trucos funcionan para mí. Espero que te ayude a resolver este problema.
.modal-dialog {
width: 70%;
}
Bootstrap 3: para mantener las funciones de respuesta para dispositivos pequeños y extra pequeños, hice lo siguiente:
@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
Con Bootstrap 3, todo lo que se requiere es un valor de porcentaje dado al diálogo modal a través de CSS
CSS
#alertModal .modal-dialog{
width: 20%;
}
Conserve el diseño sensible, establezca el ancho a lo que desee.
.modal-content {
margin-left: auto;
margin-right: auto;
max-width: 360px;
}
Mantenlo simple.
En Bootstrap 3 con CSS puedes simplemente usar:
body .modal-dialog {
/* percentage of page width */
width: 40%;
}
Esto garantiza que no rompa el diseño de la página, porque estamos usando .modal-dialog lugar de .modal que se aplicará incluso al sombreado.
En Bootstrap 3 todo lo que necesitas es esto.
<style>
.modal .modal-dialog { width: 80%; }
</style>
La mayoría de las respuestas anteriores no funcionaron para mí!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
#myModal1 .modal-dialog {
width: 80%;
}
#myModal2 .modal-dialog {
width: 50%;
}
</style>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
80%
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
50%
</button>
<center>
<!-- Modal -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
custom width : 80%
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
custom width : 50%
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</center>
En Bootstrap 3+, la forma más adecuada de cambiar el tamaño de un diálogo modal es usar la propiedad de tamaño. A continuación se muestra un ejemplo, observe el modal-sm largo de la clase modal-dialog , que indica un pequeño modal. Puede contener los valores sm para small, md para medium y lg para large.
<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
<div class="modal-dialog modal-sm"> <!-- property to determine size -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="modal_title">Some modal</h4>
</div>
<div class="modal-body">
<!-- modal content -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
</div>
</div>
</div>
</div>
En lugar de usar porcentajes para hacer que el modal responda, me parece que se puede tomar más control al usar las columnas y otros elementos de respuesta ya integrados en bootstrap.
Para hacer que el modal responda / el tamaño de cualquier cantidad de columnas:
1) Agregue un div adicional alrededor del div de diálogo modal con una clase de .container -
<div class="container">
<div class="modal-dialog">
</div>
</div>
2) Agrega un poco de CSS para hacer el ancho modal completo -
.modal-dialog {
width: 100% }
3) Alternativamente, agregue una clase extra si tiene otros modales -
<div class="container">
<div class="modal-dialog modal-responsive">
</div>
</div>
.modal-responsive.modal-dialog {
width: 100% }
4) Agregue una fila / columnas si quiere modales de varios tamaños -
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="modal-dialog modal-responsive">
...
</div>
</div>
</div>
</div>
En v3 de Bootstrap hay un método simple para hacer un modal más grande. Solo agrega la clase modal-lg al lado de modal-dialog.
<!-- My Modal Popup -->
<div id="MyWidePopup" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!!
<!-- Modal content-->
<div class="modal-content">
Esto es lo que hice, en mi custom.css agregué estas líneas y eso fue todo.
.modal-lg {
width: 600px!important;
margin: 0 auto;
}
Obviamente, puedes cambiar el tamaño del ancho.
FYI Bootstrap 3 maneja la propiedad izquierda automáticamente. Entonces, simplemente agregando este CSS cambiará el ancho y lo mantendrá centrado:
.modal .modal-dialog { width: 800px; }
He encontrado esta solución que funciona mejor para mí. Puedes usar esto:
$(''.modal'').css({
''width'': function () {
return ($(document).width() * .9) + ''px'';
},
''margin-left'': function () {
return -($(this).width() / 2);
}
});
o esto dependiendo de sus requerimientos:
$(''.modal'').css({
width: ''auto'',
''margin-left'': function () {
return -($(this).width() / 2);
}
});
Vea la publicación donde encontré eso: https://github.com/twitter/bootstrap/issues/675
La solución fue tomada de this página.
$(''#feedback-modal'').modal({
backdrop: true,
keyboard: true
}).css({
width: ''auto'',
''margin-left'': function () {
return -($(this).width() / 2);
}
});
Logrado el resultado esperado usando,
.modal-dialog {
width: 41% !important;
}
Para Bootstrap 3 aquí hay cómo hacerlo.
Agregue un estilo modal-wide a su marca HTML (como se adaptó del ejemplo en los documentos de Bootstrap 3 )
<div class="modal fade modal-wide" id="myModal" 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 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
y agrega el siguiente CSS
.modal-wide .modal-dialog {
width: 80%; /* or whatever you wish */
}
No hay necesidad de anular el margin-left en Bootstrap 3 para que esto se centre ahora.
Pruebe algo como lo siguiente (vea el ejemplo de jsfiddle en vivo aquí: http://jsfiddle.net/periklis/hEThw/1/ )
<a class="btn" onclick = "$(''#myModal'').modal(''show'');$(''#myModal'').css(''width'', ''100px'').css(''margin-left'',''auto'').css(''margin-right'',''auto'');" ref="#myModal" >Launch Modal</a>
<div class="modal" id="myModal" style = "display:none">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
Si Bootstrap> 3, simplemente agrega estilo a tu modal.
<div class="modal-dialog" style="width:80%;">
<div class="modal-content">
</div>
</div>
Si desea que sea sensible solo con CSS, use esto:
.modal.large {
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}
Nota 1: usé una clase .large , también podría hacer esto en la normal .modal
Nota 2: En Bootstrap 3, el margen negativo a la izquierda ya no es necesario (no se confirma personalmente)
/*Bootstrap 3*/
.modal.large {
width: 80%;
}
Nota 3: En Bootstrap 3 y 4, hay una clase modal-lg . Entonces, esto puede ser suficiente, pero si desea que sea receptivo, todavía necesita la solución que proporcioné para Bootstrap 3.
En algunas aplicaciones se usan modales fixed , en ese caso se podría probar el width:80%; left:10%; width:80%; left:10%; (fórmula: izquierda = 100 - ancho / 2)
Si está utilizando Bootstrap 3, necesita cambiar el div de diálogo modal y no el div modal como se muestra en la respuesta aceptada. Además, para mantener la naturaleza receptiva de Bootstrap 3, es importante escribir el CSS de anulación utilizando una consulta de medios para que el modal sea de ancho completo en dispositivos más pequeños.
Vea este JSFiddle para experimentar con diferentes anchos.
HTML
<div class="modal fade">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-header-text">Text</h3>
</div>
<div class="modal-body">
This is some text.
</div>
<div class="modal-footer">
This is some text.
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
CSS
@media screen and (min-width: 768px) {
.custom-class {
width: 70%; /* either % (e.g. 60%) or px (400px) */
}
}
Si quieres algo que no rompa el diseño relativo prueba esto:
body .modal {
width: 90%; /* desired relative width */
left: 5%; /* (100%-width)/2 */
/* place center */
margin-left:auto;
margin-right:auto;
}
Como dice @Marco Johannesen, el "cuerpo" antes del selector es para que tome una prioridad más alta que la predeterminada.
Solución menos basada (no js) para Bootstrap 2:
.modal-width(@modalWidth) {
width: @modalWidth;
margin-left: -@modalWidth/2;
@media (max-width: @modalWidth) {
position: fixed;
top: 20px;
left: 20px;
right: 20px;
width: auto;
margin: 0;
&.fade { top: -100px; }
&.fade.in { top: 20px; }
}
}
Entonces, donde quieras especificar un ancho modal:
#myModal {
.modal-width(700px);
}
Usé una combinación de CSS y jQuery, junto con las sugerencias en esta página, para crear un ancho y una altura fluidos utilizando Bootstrap 3.
Primero, algunos CSS para manejar el ancho y la barra de desplazamiento opcional para el área de contenido
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
Y luego algunos jQuery para ajustar la altura del área de contenido si es necesario
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
Escritura completa y código en http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/
Utilicé SCSS, y el modo totalmente sensible:
.modal-dialog.large {
@media (min-width: $screen-sm-min) { width:500px; }
@media (min-width: $screen-md-min) { width:700px; }
@media (min-width: $screen-lg-min) { width:850px; }
}
Utilicé de esta manera, y es perfecto para mí.
$("#my-modal")
.modal("toggle")
.css({''width'': ''80%'', ''margin-left'':''auto'', ''margin-right'':''auto'', ''left'':''10%''});
Utilice el siguiente script:
.modal {
--widthOfModal: 98%;
width: var(--widthOfModal) !important;
margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
height: 92%;
overflow-y: scroll;
}
Demostración :
A continuación se muestra el código para configurar el ancho de ventana emergente modal y la posición izquierda desde la pantalla a través de javascript.
$ (''# openModalPopupId''). css ({"width": "80%", "left": "30%"});
ACTUALIZAR:
En bootstrap 3 necesitas cambiar el diálogo modal. Entonces, en este caso, puede agregar la clase modal-admin en el lugar donde se encuentra modal-dialog .
Respuesta original (Bootstrap <3)
¿Hay alguna razón por la que intentas cambiarlo con JS / jQuery?
Puede hacerlo fácilmente con solo CSS, lo que significa que no tiene que hacer su estilo en el documento. En tu propio archivo CSS personalizado, agregas:
body .modal {
/* new custom width */
width: 560px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -280px;
}
En tu caso:
body .modal-admin {
/* new custom width */
width: 750px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -375px;
}
La razón por la que coloco el cuerpo antes del selector es para que tome una prioridad más alta que la predeterminada. De esta manera, puede agregarlo a un archivo CSS personalizado y, sin preocupaciones, actualizar Bootstrap.
Bootstrap 3.xx
<!-- Modal -->
<div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-sm employeeModal" role="document">
<form>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div class="modal-body row">
Modal Body...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</form>
</div>
</div>
Note que agregué la clase .employeeModal en el segundo div. A continuación, el estilo de esa clase.
.employeeModal{
width: 700px;
}
you can use any prefix or postfix name for modal. but you need to make sure that''s should use everywhere with same prefix/postfix name.
body .modal-nk {
/* new custom width */
width: 560px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -280px;
}
o
body .nk-modal {
/* new custom width */
width: 560px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -280px;
}