Fatal编程技术网
  • css/
  • Css 是否可以自定义引导$modal的样式

Css 是否可以自定义引导$modal的样式

css twitter-bootstrap

Css 是否可以自定义引导$modal的样式,css,twitter-bootstrap,Css,Twitter Bootstrap,在我的应用程序中，我使用引导$modal弹出窗口两次。两个弹出窗口的内容不同，因此两个弹出窗口的大小也必须不同。我尝试使用 .modal { display: block; position: absolute; left: 60%; height: 88%; width: 28%; overflow-y:auto; overflow-x:auto; border-radius: 0px; } 但正如所料，它正在改变我的两个弹出窗

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

.modal {
    display: block;
    position: absolute;
    left: 60%;
    height: 88%;
    width: 28%;
    overflow-y:auto;
    overflow-x:auto;
    border-radius: 0px;
}
但正如所料，它正在改变我的两个弹出窗口的风格。有没有办法对每个弹出窗口应用不同的类

提前感谢。

在引导中，modals将根据其中内容的大小自动更改大小。如果这就是你所需要的，BS会帮你的

如果要独立设置每个模态的样式，则除了class
modal
标记外，还需要使用
id
标记。您可以使用
在CSS中引用此
id

e、 g

相应的标记是

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


…模态内容
…模态内容
您可以看到，您可以为正在进行的每个模式提供一个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>
希望对您有所帮助。

如果您可以访问HTML，那么您可以像
那样在模式中添加一个额外的类，然后可以像
.modal.custom那样设置样式。下面是完整的示例



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


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


            <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样式，我尝试了其他用户给出的所有答案。他们都不为我工作。
我自己找到了一种方法，很多人会说这不是一种正确的方法，但它对我很有效

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



函数更改css（）{
setTimeout（函数（）{
var allModals=document.getElementsByClassName（'modal'）；
对于（var i=0；i


如果有人找到更好的方法，请回答这个问题，我一定会尝试，如果有效的话，我会给你奖金
 我相信如果您使用开发人员控制台（取决于您使用的浏览器），您会发现直接设置“.modal”类的样式不会影响模态，因为主样式可以在应用于模态子元素的类中找到。（例如，模态对话框，.模态内容）。在您的情况下，您应该做的是：


。模态内容{
边界半径：0；
背景剪辑：边框框；
最小高度：400px；
最小宽度：400px；
}

2017年更新-Bootstrap 4

自Bootstrap3以来，模式的结构已经发生了变化，因此现在需要不同的CSS来定制位置、大小或模式样式。要更改模式宽度，请在
模式对话框
上为exmaple设置
最大宽度
：


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



您能提供一个最起码的工作示例吗？可能样式表链接不正确，或者存在其他更神秘的问题。它不起作用，因为我没有将.modal类指定给引导。这是默认设置，因此如果您能告诉我如何将ID分配给引导模式，您的方法将起作用。使用ID在CSS中应用样式。您能为您的问题提供更多详细信息吗？例如，使用modal的html代码。或者可能是一个JSFIDLE？@Joseph这是一个更一般的问题，而不是具体的问题。如果我在一个项目中有两个模态。能给我两种不同的宽度和高度吗？如果可能的话，怎么做？@adityaponkse您可以通过在模态右侧添加额外的类来完成吗？或者，您希望得到其他结果吗？@SurjithSM如何向引导模式添加额外的类？@adityaponke您有权访问HTML吗？然后你可以像
那样做，然后你可以像
.modal.newstyle
那样设置样式。我缺少什么吗？看起来像是来自的复制粘贴，对我来说不起作用reason@AdityaPonkshe是的，但我已经为您定制了。这对你有用吗？@adityaponksher你能告诉我你在我的小提琴上发现了什么使它不适合你吗？在我的应用程序中，如果我从.modal类中删除宽度。它有一些默认宽度（543 px），我不会在任何地方设置它。@adityaponke您不需要删除宽度，只需更改额外类的宽度。因此，您希望将所有宽度设置为60%。正确的？您只需使用自定义CSS即可。就像
.modal{width:60%}
那样，所有的modal都会改变是的，正如你所说，这不是一种正确的方法。您可以坚持使用css而不使用javascript。除非使用相同的数据目标，否则必须能够具有不同的宽度。如果您使用相同的数据目标来实现不同的宽度，最好重新考虑您的策略。您是想在按下“运行代码段”按钮时显示一些内容，还是只是想在哪里显示代码块？对不起，我弄错了。更正。。。谢谢你给我指了指

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



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



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);
}



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