是否可以自定义风格的bootstrap $ modal [英] Is it possible to customize style of bootstrap $modal

问题描述

在我的应用程序中，我使用bootstrap $ modal 弹出两次。两个弹出窗口的内容不同，因此两个弹出窗口的大小也必须不同。我尝试使用

In my application I am using bootstrap $modal popup two different times. content of both pop-ups is different hence size of both pop-up must be also different. I tried to style $modal using

.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?

提前感谢。

推荐答案

如果你有访问HTML，那么你可以添加一个额外的类到如< div class =modal custom> 可以样式为 .modal.custom 。下面的完整示例

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

工作演示

Working Demo

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 b
$ b

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.

这篇关于是否可以自定义风格的bootstrap $ modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！