CSS 是否可以自定义 bootstrap $modal 的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20854035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to customize style of bootstrap $modal
提问by Aditya Ponkshe
In my application I am using bootstrap $modalpopup two different times. content of both pop-ups is different hence size of both pop-up must be also different. I tried to style $modalusing
在我的应用程序中，我使用了$modal两次不同的引导弹出窗口。两个弹出窗口的内容不同，因此两个弹出窗口的大小也必须不同。我尝试$modal使用样式
.modal {
display: block;
position: absolute;
left: 60%;
height: 88%;
width: 28%;
overflow-y:auto;
overflow-x:auto;
border-radius: 0px;
}
but as expected it is changing style of both of my pop-ups. Is there any way to apply different class to each popup?
但正如预期的那样，它正在改变我的两个弹出窗口的风格。有没有办法对每个弹出窗口应用不同的类？
Thanks in advance.
提前致谢。
回答by Surjith S M
If you have access to HTML, Then you can add an extra class to the modal like <div class="modal custom">then you can style it like .modal.custom. Full example below
如果您可以访问 HTML，那么您可以向模态添加一个额外的类，然后您可以将其<div class="modal custom">样式设置为.modal.custom. 完整示例如下
HTML
HTML
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Variable Modal
</button>
<!-- Modal -->
<div class="modal custom fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
....
CSS
CSS
.modal.custom .modal-dialog {
width:50%;
margin:0 auto;
/*add what you want here*/
}
Let me know if you have further issues in the comments.
如果您在评论中还有其他问题，请告诉我。
回答by Zim
Update 2017 - Bootstrap 4
2017 年更新 - Bootstrap 4
The structure of the modal has changed since Bootstrap 3, so now different CSS is required to customize the position, size or modal styles. To change the modal width, set the max-widthon the modal-dialog, for exmaple:
自 Bootstrap 3 以来，模态的结构发生了变化，因此现在需要不同的 CSS 来自定义位置、大小或模态样式。要更改模式宽度，请在max-width上设置modal-dialog，例如：
.modal.custom .modal-dialog {
max-width: 50%;
}
回答by sredmond
In Bootstrap, modals will automatically change size depending on the size of the content within them. If that's all you need, BS does it for you...
在 Bootstrap 中，模态将根据其中内容的大小自动更改大小。如果这就是您所需要的，BS 会为您完成...
If you want to style each modal independently, you want to use an idtag in addition to the class modaltags. You can reference this idin your CSS with a #.
如果您想独立地设置每个模态的样式id，除了类modal标签之外，您还想使用一个标签。您可以id在 CSS 中使用#.
e.g.
例如
#modalblue {
background-color:blue;
}
#modalgreen {
background-color:green;
}
and the corresponding markup is
和相应的标记是
<div class="modal" some-other-attributes id="modalblue">
...modal content
</div>
<div class="modal" some-other-attributes id="modalgreen">
...modal content
</div>
回答by AdrianS
You can see herethat you can give an id for each and every modal you are making. Here is an example:
你可以在这里看到你可以为你正在制作的每个模态提供一个 id。下面是一个例子：
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#green-modal">
Launch demo modal
</button>
<div class="modal fade" id="green-modal" 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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 #2
模态#2
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#red-modal">
Launch demo modal
</button>
<div class="modal fade" id="red-modal" 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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
Now you can easily target your css using thos id's. E.g.
现在，您可以使用 thos id 轻松定位您的 css。例如
#green-modal { background-color: #00FF00; }
#red-modal { background-color: #FF0000; }
Hope it helps.
希望能帮助到你。
回答by Karthick Kumar
<div id="addtaskmodal" class="modal hide fade" tabindex="-1" role="dialog" style="width:80%;left:30%;right:30%;top:5%;bottom:5%; position:fixed; overflow:hidden;" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>New Task</h3>
</div>
<div class="modal-body" style="max-height:500px;" >
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="startnow" onClick="createNewTask('start')" >Start
now</button>
<button type="button" class="btn btn-success" onclick="createNewTask('')" >Save</button>
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
<div id="addclientmodal" class="modal hide fade" tabindex="-1" role="dialog" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>New Task</h3>
</div>
<div class="modal-body" style="max-height:500px;" >
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="saveNewClient()" >Save</button>
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
here i have two modal windows ,load the contents dynamically by ajax,i had inline style for modal popup , also you can add css style by referring the #id
这里我有两个模态窗口，通过ajax动态加载内容，我有模态弹出窗口的内联样式，你也可以通过引用#id来添加css样式
回答by Aditya Ponkshe
I tried all the answers given by other users. None of them worked for me. I found a way on my own, many will say it's not a correct method but it is working for me.
我尝试了其他用户给出的所有答案。他们都没有为我工作。我自己找到了一种方法，很多人会说这不是一种正确的方法，但它对我有用。
I just called a javascript function where I am setting style for .modal
我刚刚调用了一个 javascript 函数，我正在为 .modal 设置样式
function changeCSS(){
setTimeout(function(){
var allModals = document.getElementsByClassName('modal');
for (var i = 0; i < allModals.length; i++) {
console.log(allModals[i]);
allModals[i].style.width="60%";
}
},1500);
}
If anyone finds a better way to do this please answer this question I'll surely try it and assign you the bounty if it works.
如果有人找到更好的方法来做到这一点，请回答这个问题，我一定会尝试一下，如果可行，我会为您分配赏金。
回答by ikemesit
I believe if you use the developer console (depending on which browser you are using), you will find that directly styling the ".modal" class doesn't affect the modals as the main styling can be found in the classes applied to the modal's sub elements. (e.g .modal-dialog, .modal-content). In your case, what you should do is:
我相信如果你使用开发者控制台（取决于你使用的浏览器），你会发现直接设置“.modal”类的样式不会影响模态，因为主要样式可以在应用于模态的类中找到子元素。（例如 .modal-dialog、.modal-content）。在你的情况下，你应该做的是：
.modal-content{
border-radius: 0;
background-clip: border-box;
min-height: 400px;
min-width: 400px;
}
