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*/
}

如果您在评论中有进一步的问题，请与我们联系。

Answer 2

在Bootstrap中，模态将根据其中内容的大小自动更改大小。如果这就是你所需要的，BS会为你做这件事......

如果您想独立设置每个模态的样式，除了id类标记之外，您还希望使用modal标记。您可以使用id在CSS中引用此#。

e.g。

#modalblue {
  background-color:blue;
}
#modalgreen {
  background-color:green;
}

，相应的标记是

<div class="modal" some-other-attributes id="modalblue">
  ...modal content
</div>
<div class="modal" some-other-attributes id="modalgreen">
  ...modal content
</div>

Answer 3

您可以看到here您可以为您正在制作的每个模式提供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">&times;</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>

模式＃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">&times;</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>

现在，您可以使用此ID轻松定位您的CSS。 E.g。

#green-modal { background-color: #00FF00; }
#red-modal { background-color: #FF0000; }

希望它有所帮助。

Answer 4

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

这里我有两个模态窗口，通过ajax动态加载内容，我有内联样式用于模态弹出，也可以通过引用#id

添加css样式

Answer 5

我尝试了其他用户提供的所有答案。他们都没有为我工作。我找到了自己的方法，很多人会说这不是一个正确的方法，但它对我有用。

我刚刚调用了一个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);
}

如果有人找到更好的方法来做到这一点，请回答这个问题，我一定会尝试一下，如果有效，请给你奖励。

Answer 6

我相信如果您使用开发者控制台（取决于您使用的浏览器），您会发现直接设置＆＃34; .modal＆＃34; class不会影响模态，因为主要样式可以在应用于模态子元素的类中找到。（例如.modal-dialog，.modal-content）。在你的情况下，你应该做的是：

.modal-content{
    border-radius: 0;
    background-clip: border-box;
    min-height: 400px;
        min-width: 400px;
}

Answer 7

2017年更新 - Bootstrap 4

从Bootstrap 3开始，模态的结构发生了变化，因此现在需要不同的CSS来自定义位置，大小或模态样式。要更改模式宽度，请在max-width上设置modal-dialog，例如：

.modal.custom .modal-dialog {
    max-width: 50%;
}

Custom modal demo

是否可以自定义bootstrap $ modal的样式

7 个答案: