Comment modifier la largeur par défaut d'une boîte modale Twitter Bootstrap?
J'ai essayé ce qui suit:
<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>
Et ce Javascript:
$('.modal-admin').css('width', '750px');
$('.modal-admin').css('margin', '100px auto 100px auto');
$('.modal-admin').modal('show')
Le résultat n'est pas ce que j'attendais. Le modal en haut à gauche est positionné au centre de l'écran.
Quelqu'un peut-il m'aider. Quelqu'un a-t-il essayé cela? Je suppose que ce n'est pas inhabituel de vouloir faire.
PDATE:
Dans bootstrap 3 vous devez changer le dialogue modal. Donc, dans ce cas, vous pouvez ajouter la classe modal-admin à l'endroit où se trouve modal-dialog.
Réponse originale (Bootstrap <3)
Y a-t-il une raison pour laquelle vous essayez de le changer avec JS/jQuery?
Vous pouvez facilement le faire avec seulement du CSS, ce qui signifie que vous n’aurez pas à styliser votre document. Dans votre propre fichier CSS personnalisé, vous ajoutez:
body .modal {
/* new custom width */
width: 560px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -280px;
}
Dans ton cas:
body .modal-admin {
/* new custom width */
width: 750px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -375px;
}
La raison pour laquelle je mets body avant le sélecteur est qu'il prend une priorité plus élevée que celle par défaut. De cette façon, vous pouvez l'ajouter à un fichier CSS personnalisé et mettre à jour Bootstrap sans soucis.
Si vous voulez le rendre réactif avec seulement CSS, utilisez ceci:
_.modal.large {
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}
_ Note 1: J'ai utilisé une classe _.large_, vous pouvez également le faire sur le _.modal_ normal
Note 2: Dans Bootstrap 3, la marge gauche négative peut ne plus être nécessaire (non confirmé personnellement)
_/*Bootstrap 3*/
.modal.large {
width: 80%;
}
_ Remarque 3: Dans Bootstrap 3 et 4, il existe une classe _modal-lg_. Cela peut donc suffire, mais si vous souhaitez le rendre réactif, vous avez toujours besoin du correctif que j'ai fourni pour Bootstrap 3.
Dans certaines applications, fixed modaux sont utilisés. Dans ce cas, vous pouvez essayer _width:80%; left:10%;_ (formule: left = 100 - width/2)
Si vous utilisez Bootstrap 3, vous devez modifier le div modal-dialog et non le div modal comme il est indiqué dans la réponse acceptée. De plus, pour conserver le caractère réactif de Bootstrap 3, il est important d'écrire le code CSS de remplacement à l'aide d'une requête multimédia afin que le modal occupe toute sa largeur sur des périphériques plus petits.
Voir this JSFiddle pour expérimenter différentes largeurs.
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 vous voulez quelque chose qui ne casse pas la conception relative, essayez ceci:
body .modal {
width: 90%; /* desired relative width */
left: 5%; /* (100%-width)/2 */
/* place center */
margin-left:auto;
margin-right:auto;
}
Comme le dit @Marco Johannesen, le "corps" avant le sélecteur est tel qu'il prend une priorité plus élevée que celle par défaut.
Dans Bootstrap 3+, le moyen le plus approprié de modifier la taille d'un dialogue modal consiste à utiliser la propriété size. Ci-dessous un exemple, notez le modal-sm le long de la classe modal-dialog, indiquant un petit modal. Il peut contenir les valeurs sm pour les petites, md pour les moyennes et lg pour les grandes.
<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>
Pour Bootstrap 3, voici comment procéder.
Ajoutez un style modal-wide à votre balise HTML (comme adapté de l'exemple dans la Bootstrap 3 docs )
<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 -->
et ajouter le CSS suivant
.modal-wide .modal-dialog {
width: 80%; /* or whatever you wish */
}
Il n'est pas nécessaire de remplacer margin-left dans Bootstrap 3 pour que cela soit centré maintenant.
Dans Bootstrap vous n’avez besoin que de ceci
<style>
.modal .modal-dialog { width: 80%; }
</style>
La plupart des réponses ci-dessus n'ont pas fonctionné pour moi !!!
<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>La solution a été prise de this page
$('#feedback-modal').modal({
backdrop: true,
keyboard: true
}).css({
width: 'auto',
'margin-left': function () {
return -($(this).width() / 2);
}
});
Dans la v3 de Bootstrap, il existe une méthode simple pour agrandir un modal. Ajoutez simplement la classe modal-lg à côté 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">
Bootstrap 3: Afin de maintenir des fonctionnalités réactives pour les petits et très petits appareils, j'ai procédé comme suit:
@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
C'est ce que j'ai fait, dans mon fichier custom.css, j'ai ajouté ces lignes et c'était tout.
.modal-lg {
width: 600px!important;
margin: 0 auto;
}
Évidemment, vous pouvez changer la taille de la largeur.
Si Bootstrap> 3, ajoutez simplement du style à votre modal.
<div class="modal-dialog" style="width:80%;">
<div class="modal-content">
</div>
</div>
J'ai trouvé cette solution qui fonctionne mieux pour moi. Vous pouvez utiliser ceci:
$('.modal').css({
'width': function () {
return ($(document).width() * .9) + 'px';
},
'margin-left': function () {
return -($(this).width() / 2);
}
});
ou cela selon vos besoins:
$('.modal').css({
width: 'auto',
'margin-left': function () {
return -($(this).width() / 2);
}
});
Voir le post où j'ai trouvé que: https://github.com/Twitter/bootstrap/issues/675
FYI Bootstrap 3 gère automatiquement la propriété left. Donc, ajouter simplement ce CSS changera la largeur et le maintiendra centré:
.modal .modal-dialog { width: 800px; }
Préservez le design réactif, réglez la largeur à votre convenance.
.modal-content {
margin-left: auto;
margin-right: auto;
max-width: 360px;
}
Rester simple.
En modifiant la classe model-dialog, vous pouvez obtenir le résultat attendu. Ces petites astuces fonctionnent pour moi. J'espère que cela vous aidera à résoudre ce problème.
.modal-dialog {
width: 70%;
}
Dans Bootstrap avec CSS, vous pouvez simplement utiliser:
body .modal-dialog {
/* percentage of page width */
width: 40%;
}
Cela garantit que vous ne cassez pas la conception de la page, car nous utilisons .modal-dialog au lieu de .modal qui sera appliqué même à l'ombrage.
Avec Bootstrap 3, tout ce qui est requis est un pourcentage donné au dialogue modal via CSS
CSS
#alertModal .modal-dialog{
width: 20%;
}
J'ai utilisé une combinaison de CSS et de jQuery, ainsi que des astuces sur cette page, pour créer une largeur et une hauteur fluides à l'aide de Bootstrap 3.
Premièrement, certains CSS pour gérer la largeur et une barre de défilement optionnelle pour la zone de contenu
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
Et puis un peu de jQuery pour ajuster la hauteur de la zone de contenu si nécessaire
$(".modal-wide").on("show.bs.modal", function() {
var height = $(window).height() - 200;
$(this).find(".modal-body").css("max-height", height);
});
Rédaction complète et code sur http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/
Plutôt que d’utiliser des pourcentages pour rendre le modal réactif, j’aperçois que l’utilisation des colonnes et d’autres éléments réactifs déjà intégrés au bootstrap peut être plus contrôlée.
Pour rendre le modal sensible/la taille de n’importe quel nombre de colonnes:
1) Ajouter un div supplémentaire autour du div de dialogue modal avec une classe de .container -
<div class="container">
<div class="modal-dialog">
</div>
</div>
2) Ajoutez un peu de CSS pour rendre le modal complet -
.modal-dialog {
width: 100% }
3) Vous pouvez également ajouter une classe supplémentaire si vous avez d'autres modaux -
<div class="container">
<div class="modal-dialog modal-responsive">
</div>
</div>
.modal-responsive.modal-dialog {
width: 100% }
4) Ajoutez une ligne/des colonnes si vous voulez des modaux de tailles différentes -
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="modal-dialog modal-responsive">
...
</div>
</div>
</div>
</div>
Ajouter ce qui suit sur votre fichier css
.popover{
width:auto !important;
max-width:445px !important;
min-width:200px !important;
}
Utilisez le script ci-dessous:
.modal {
--widthOfModal: 98%;
width: var(--widthOfModal) !important;
margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
height: 92%;
overflow-y: scroll;
}
démo:
Essayez quelque chose comme ce qui suit (voir l’exemple de jsfiddle en direct ici: 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>
Résultat attendu obtenu avec,
.modal-dialog {
width: 41% !important;
}
Je l'ai résolu pour Bootstrap 4.1
Mélange de solutions précédemment publiées
.modal-lg {
max-width: 90% !important; /* desired relative width */
margin-left:auto !important;
margin-right:auto !important;
}J'ai utilisé SCSS et le modal entièrement réactif:
.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; }
}
J'ai utilisé de cette façon, et c'est un travail parfait pour moi
$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});
Ci-dessous le code permettant de définir la largeur de la fenêtre contextuelle modale et la position de gauche de l'écran par le biais de javascript.
$ ('# openModalPopupId'). css ({"width": "80%", "left": "30%"});
Solution moins basée (pas de js) pour 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; }
}
}
Ensuite, partout où vous souhaitez spécifier une largeur modale:
#myModal {
.modal-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;
}
ou
body .nk-modal {
/* new custom width */
width: 560px;
/* must be half of the width, minus scrollbar on the left (30px) */
margin-left: -280px;
}
.Size(ModalSize.Large)
sample:
using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
{
}
Bootstrap 3.x.x
<!-- 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>
Remarquez que j'ai ajouté la classe .employeeModal dans la deuxième div. Puis style cette classe.
.employeeModal{
width: 700px;
}
