css - 是否可以自定义 Bootstrap $modal 的样式

Question

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

设置 $modal 的样式

.modal {
    display: block;
    position: absolute;
    left: 60%;
    height: 88%;
    width: 28%;
    overflow-y:auto;
    overflow-x:auto;
    border-radius: 0px;
}

但正如预期的那样，它正在改变我的两个弹出窗口的样式。有什么方法可以为每个弹出窗口应用不同的类？

提前致谢。

Answer 1

如果您可以访问 HTML，那么您可以向模式添加一个额外的类，例如 <div class="modal custom">然后你可以像.modal.custom一样设置它的样式.完整示例如下

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

.modal.custom .modal-dialog {
    width:50%;
    margin:0 auto;
    /*add what you want here*/
}

如果您在评论中还有其他问题，请告诉我。