logo标签列表

如何正确地将自定义CSS添加到Bootstrap模态框

javascriptjqueryhtmladobe-brackets
3
我正在为名为Brackets的文本编辑软件编写扩展程序，Brackets使用Bootstrap来设计模态框和CSS样式。我试图向模态框添加自定义CSS，以便重新格式化、移动和调整模态框上的不同元素（例如复选框和下拉菜单），以使其看起来更加清晰。
每当我尝试使用内置的标签或链接的CSS向模态框添加CSS时，模态框就无法正确加载。模态框会加载，然后整个屏幕上方会有一个不透明的黑色薄膜，并且模态框也无法使用。
因此，我可以推断出我没有正确地添加CSS，因为当我删除所添加的CSS时，模态框会恢复正常行为。
如何向这个Bootstrap模态框添加自定义CSS样式？
<div id='templates_modal' class='template modal'>
<div class='modal-header'>
    <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span></button>
    <h1 class='dialog-title'>{{TITLE_H1}}</h1>
</div>
<p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p>
<p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{CONTENT_ERROR}}</p>
<p style='display: none; color: red; font-weight: bold; padding: 10px;' id='templates_error'>{{NO_FILE_OPEN_ERROR}}</p>
<div class='modal-body'>
    <h4>{{LANGUAGE_SELECTION}}</h4>
    <p>{{LANGUAGE_DESCRIPTION}}</p>
    <select id='languages'>
        <option value=''>{{SELECT_LABEL}}</option>
        <option value='english'>en</option>
        <option value='german'>de</option>
        <option value='spanish'>es</option>
        <option value='french'>fr</option>
        <option value='italian'>it</option>
        <option value='chinese'>zh-cn</option>
    </select>
    <h4>{{CHARSET_SELECTION}}</h4>
    <p>{{CHARSET_DESCRIPTION}}</p>
    <select id="charset">
        <option value=''>{{SELECT_LABEL}}</option>
        <option value='utf8'>UTF-8</option>
        <option value='utf16'>UTF-16</option>
    </select>

    <h4>{{TITLE_H4}}</h4>
    <select id="doctype">
        <option value=''>{{SELECT_LABEL}}</option>
        <option value='html5'>HTML5</option>
        <option value='html4loose'>HTML4 Transitional</option>
        <option value='html4strict'>HTML4 Strict</option>
        <option value='xhtml1loose'>XHTML 1 Trasitional</option>
        <option value='xhtml1strict'>XHTML 1 Strict</option>
        <option value='xhtml11'>XHTML 1.1</option>
    </select>

    <h4>{{SECTION_TEMPLATES}}</h4>
    <p>{{SECTION_TEMPLATES_DESC}}</p>
    <ul class="checkbox-grid" id="libraries">
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>' id="angularjs" value="angularjs" /><label for="angularjs"> Angular JS | 1.3.15</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>' id="angularmaterial" value="angularmaterial" /><label for="angularmaterial"> Angular Material | 0.10.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>' id="dojo" value="dojo" /><label for="dojo"> Dojo | 1.10.4</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>' id="extcore" value="extcore" /><label for="extcore"> Ext Core | 3.1.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>' id="jquery111" value="jquery111" /><label for="jquery111"> jQuery | 1.11.3</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>' id="jquery214" value="jquery214" /><label for="jquery214"> jQuery | 2.1.4</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>' id="jquerymobile" value="jquerymobile" /><label for="jquerymobile"> jQuery Mobile | 1.4.5</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>' id="jqueryui" value="jqueryui" /><label for="jqueryui"> jQUery UI | 1.11.4</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>' id="mootools" value="mootools" /><label for="mootools"> MooTools | 1.5.1</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>'  id="prototype"value="prototype" /><label for="prototype"> Prototype | 1.7.2.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>' id="script_aculo_us" value="script_aculo_us" /><label for="script_aculo_us"> script.aculo.us | 1.9.0 (Requires Prototype)</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>' id="spf" value="spf" /><label for="spf"> SPF | 2.2.0</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>' id="swfobject" value="swfobject" /><label for="swfobject"> SWFObject | 2.2</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>' id="threejs" value="threejs" /><label for="threejs"> three.js | r69</label></li>
        <li><input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>' id="webfontloader" value="webfontloader" /><label for="webfontloader"> Web Font Loader | 1.5.18</label></li>
    </ul>
    <div class='modal-footer'>
        <a id='templates_modalGenBtn generate_html_btn' href='#' class='dialog-button btn btn-danger'>{{GENERATE_BUTTON}}</a>
        <a id='templates_modalBtn' href='#' class='dialog-button btn btn-danger' data-dismiss='modal'>{{CANCEL_BUTTON}}</a>
    </div>
</div>
</div>
1
添加自定义类（如您的标记所示）* 是 *正确的方法。如果您的 CSS 影响模态呈现的方式，我怀疑您正在定位模态内容的错误部分。您能否将其缩减为最小示例，并添加一些您尝试过的 CSS？ - Tieson T.
当我尝试在HTML中添加一个<link>到CSS页面时，会出现不透明的膜层。因此我很难操作类。不幸的是，这个模态框是为Brackets扩展构建的。所以如果我添加CSS，除非将扩展加载到Brackets中，否则你看不到它“失败”。 - jward01
2个回答
4
模态框加载后，整个屏幕会出现不透明的黑色薄膜，并且模态框变得无法使用。
您缺少2个div：<div class="modal-dialog"> 和 <div class='modal-content'> 没有 <div class="modal-dialog"> 和 <div class='modal-content'> 示例 有了它们：
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#templates_modal">Open Modal</button>
<div id='templates_modal' class='template modal'>
<div class="modal-dialog">
    <div class='modal-content'>
    <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>&times;</span>
        </button>
         <h1 class='dialog-title'>{{TITLE_H1}}</h1>

    </div>
    <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p>
    <p style='display: none; color: red; font-weight: bold;' id='templates_warning'>{{CONTENT_ERROR}}</p>
    <p style='display: none; color: red; font-weight: bold; padding: 10px;' id='templates_error'>{{NO_FILE_OPEN_ERROR}}</p>
    <div class='modal-body'>
         <h4>{{LANGUAGE_SELECTION}}</h4>

        <p>{{LANGUAGE_DESCRIPTION}}</p>
        <select id='languages'>
            <option value=''>{{SELECT_LABEL}}</option>
            <option value='english'>en</option>
            <option value='german'>de</option>
            <option value='spanish'>es</option>
            <option value='french'>fr</option>
            <option value='italian'>it</option>
            <option value='chinese'>zh-cn</option>
        </select>
         <h4>{{CHARSET_SELECTION}}</h4>

        <p>{{CHARSET_DESCRIPTION}}</p>
        <select id="charset">
            <option value=''>{{SELECT_LABEL}}</option>
            <option value='utf8'>UTF-8</option>
            <option value='utf16'>UTF-16</option>
        </select>
         <h4>{{TITLE_H4}}</h4>

        <select id="doctype">
            <option value=''>{{SELECT_LABEL}}</option>
            <option value='html5'>HTML5</option>
            <option value='html4loose'>HTML4 Transitional</option>
            <option value='html4strict'>HTML4 Strict</option>
            <option value='xhtml1loose'>XHTML 1 Trasitional</option>
            <option value='xhtml1strict'>XHTML 1 Strict</option>
            <option value='xhtml11'>XHTML 1.1</option>
        </select>
         <h4>{{SECTION_TEMPLATES}}</h4>

        <p>{{SECTION_TEMPLATES_DESC}}</p>
        <ul class="checkbox-grid" id="libraries">
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>' id="angularjs" value="angularjs" />
                <label for="angularjs">Angular JS | 1.3.15</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>' id="angularmaterial" value="angularmaterial" />
                <label for="angularmaterial">Angular Material | 0.10.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>' id="dojo" value="dojo" />
                <label for="dojo">Dojo | 1.10.4</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script>' id="extcore" value="extcore" />
                <label for="extcore">Ext Core | 3.1.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>' id="jquery111" value="jquery111" />
                <label for="jquery111">jQuery | 1.11.3</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>' id="jquery214" value="jquery214" />
                <label for="jquery214">jQuery | 2.1.4</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>' id="jquerymobile" value="jquerymobile" />
                <label for="jquerymobile">jQuery Mobile | 1.4.5</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>' id="jqueryui" value="jqueryui" />
                <label for="jqueryui">jQUery UI | 1.11.4</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>' id="mootools" value="mootools" />
                <label for="mootools">MooTools | 1.5.1</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>' id="prototype" value="prototype" />
                <label for="prototype">Prototype | 1.7.2.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>' id="script_aculo_us" value="script_aculo_us" />
                <label for="script_aculo_us">script.aculo.us | 1.9.0 (Requires Prototype)</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/spf/2.2.0/spf.js"></script>' id="spf" value="spf" />
                <label for="spf">SPF | 2.2.0</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>' id="swfobject" value="swfobject" />
                <label for="swfobject">SWFObject | 2.2</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/threejs/r69/three.min.js"></script>' id="threejs" value="threejs" />
                <label for="threejs">three.js | r69</label>
            </li>
            <li>
                <input type="checkbox" name="lib_checkboxes" data-script='<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>' id="webfontloader" value="webfontloader" />
                <label for="webfontloader">Web Font Loader | 1.5.18</label>
            </li>
        </ul>
        <div class='modal-footer'> <a id='templates_modalGenBtn generate_html_btn' href='#' class='dialog-button btn btn-danger'>{{GENERATE_BUTTON}}</a>
 <a id='templates_modalBtn' href='#' class='dialog-button btn btn-danger' data-dismiss='modal'>{{CANCEL_BUTTON}}</a>
        </div>
     </div>
     </div>
    </div>
</div>

这里

使用Bootstrap预定义类进行样式设置，并使用网格系统进行表单格式设置，放在模态框内。

这里

您可以像内联样式一样添加自定义的css。例如：<p style ='display: none; color: red; font-weight: bold;' id='templates_warning'>{{DOCTYPE_ALERT}}</p>或者将自定义选择器放入样式表中，最好是采用自定义选择器，因为之后您可以使用媒体查询根据屏幕尺寸调整模态框内容。

例如：

<p class="nodisplay" id='templates_warning'>{{DOCTYPE_ALERT}}</p>

并且在样式表中

.nodisplay {
    display: none;
    color: red;
    font-weight: bold;
}

Fiddle

1
你已经在HTML头部分有了bootstrap.css，如果你想添加另一个样式表，只需将其放在bootstrap.css下面，像这样<link rel="stylesheet" href="yourstylesheet" />，请在模态框中放置<div class='modal-content'>，否则你将继续得到opaque black film，这基本上是当打开模态框时所得到的模态框覆盖层，因此请在模态框中放置这个缺失的div <div class='modal-content'>，请参见上面的答案中的模态框代码。 - Shehary
1
请注意，我刚刚发现在模态框中还缺少一个 <div class="modal-dialog">。请查看更新的答案。 - Shehary
1
在您提出的问题中，您提到 Brackets使用Bootstrap来对模态框和CSS进行样式设置。 您如何知道它正在使用 Brackets使用Bootstrap来对模态框和CSS进行样式设置。 当您不知道Bootstrap CSS在哪里时，但如果您仍然不确定，可以使用内联样式，就像您已经尝试过的一样，因为模态框中没有必须使用自定义选择器的自定义样式。 - Shehary
1
我认为你需要这个链接http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp ，使用预定义的bootstrap类样式表格，例如<select id="doctype">添加一个类<select id="doctype" class="form-control">并将其放置在<div class="form-group"></div>中。你还可以使用<div class="row"><div class="col-xs-12></div></div>格式化表格，如http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp所示。剩下的就是自定义了，可以使用内联样式。 - Shehary
1
这里有一个例子http://jsfiddle.net/4hkafuy2/5/，可以让你完全了解并继续处理模态框中的其他元素。 - Shehary
显示剩余4条评论
1
在HTML文件中添加像这样的ID：
 <div class="modal fade"  style="border-radius : 20px !important;" id="createPageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered"  style="border-radius : 20px !important;" role="document">
                       <!--here--> <div class="modal-content" id="page_modal_content">
                       <!--here--><div class="modal-header" id="page_modal_header">
                                <h5 class="modal-title" id="exampleModalLongTitle">Please enter your credentials to login.</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body"> 
                                <form class="login_form ">
                                    <label for="user_form_name">User name</label>
                                    <input id="user_form_name" type="text" placeholder="User name" required />
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button style="border-radius : 20px; width : 45%;" type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                                <button style="border-radius : 20px; width : 45%;" type="button" class="btn btn-success">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>

"并且CSS应该是：

"
#page_modal_content {
  border-radius: 10px !important;
} 
#page_modal_header {
  border-top-right-radius: 10px !important;/* you must add important*/
  border-top-left-radius: 10px !important;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接