Javascript 如何正确地将自定义CSS添加到引导模式
我正在为文本编辑软件编写一个名为方括号的扩展,方括号使用Bootstrap来设置模态和CSS的样式。 我正在尝试向模式中添加自定义CSS,以便可以重新格式化、移动和调整模式上的不同元素(如复选框和下拉菜单)的大小,使其看起来更干净 每次我试图通过使用内置标记或链接的CSS向模式添加CSS时,模式都无法正确加载。 模态加载后,整个屏幕上会覆盖一层不透明的黑色薄膜,模态变得不可用 因此,我可以推断我没有正确添加CSS,因为当我删除我添加的CSS时,模态纠正了行为 如何将自定义CSS样式添加到此引导模式Javascript 如何正确地将自定义CSS添加到引导模式,javascript,jquery,html,adobe-brackets,Javascript,Jquery,Html,Adobe Brackets,我正在为文本编辑软件编写一个名为方括号的扩展,方括号使用Bootstrap来设置模态和CSS的样式。 我正在尝试向模式中添加自定义CSS,以便可以重新格式化、移动和调整模式上的不同元素(如复选框和下拉菜单)的大小,使其看起来更干净 每次我试图通过使用内置标记或链接的CSS向模式添加CSS时,模式都无法正确加载。 模态加载后,整个屏幕上会覆盖一层不透明的黑色薄膜,模态变得不可用 因此,我可以推断我没有正确添加CSS,因为当我删除我添加的CSS时,模态纠正了行为 如何将自定义CSS样式添加到此引导模
<div id='templates_modal' class='template modal'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</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>
&时代;
{{TITLE_H1}}
{{DOCTYPE\u ALERT}
{{CONTENT\u ERROR}
{{NO\u FILE\u OPEN\u error}
{{语言选择}
{{语言描述}
{{SELECT_LABEL}}
EN
判定元件
锿
fr
信息技术
简体中文
{{CHARSET_SELECTION}}
{{CHARSET_DESCRIPTION}}
{{SELECT_LABEL}}
UTF-8
UTF-16
{{TITLE_H4}}
{{SELECT_LABEL}}
HTML5
HTML4过渡
严格的HTML4
XHTML1传输
XHTML1严格
XHTML1.1
{{SECTION_TEMPLATES}}
{{SECTION_TEMPLATES_DESC}}
- 角度JS | 1.3.15
- 角材料| 0.10.0
- Dojo | 1.10.4
- 外部核心| 3.1.0
- jQuery | 1.11.3
- jQuery | 2.1.4
- jQuery Mobile | 1.4.5
- jQUery用户界面| 1.11.4
- MooTools | 1.5.1
- 原型| 1.7.2.0
- script.aculo.us | 1.9.0(需要原型)
- SPF | 2.2.0
- SWFObject | 2.2
- 3.js | r69
- Web字体加载器| 1.5.18
模态加载,然后整个屏幕上会覆盖一层不透明的黑色薄膜,模态变得不可用
您缺少2个div
和
没有
和
和
<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'>×</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>
在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">×</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影响了模态的呈现方式,我怀疑你的目标是模态内容的错误部分。你能把这个精简到一个最小的例子,并添加一些你尝试过的CSS吗?当我尝试将一个HTML添加到CSS页面时,不透明的胶片出现了。所以我很难操纵这些类。不幸的是,模态是为括号扩展而构建的。因此,如果我添加CSS,除非您将扩展加载到括号中,否则您不会看到它“失败”。您已经在HTML头部分有bootstrap.CSS,如果你想添加另一个sytlesheet,只需将它放在bootstrap.css下,像这样
,请将
放在模态中,否则你将继续得到不透明的黑色胶片
,这基本上是打开模态时得到的模态叠加,因此将缺少的div
放在模态中,请参见上面的模态代码在我把它放在更新答案的地方的回答中,我注意到在modalin问题中有另一个div缺少了
,您提到,方括号使用Bootstrap来设置模态和CSS的样式代码>如何知道它在使用方括号使用引导设置模态和CSS的样式代码>当你不知道引导css在哪里,但你仍然不知道,然后像你已经尝试过的那样使用内联样式,因为模态中没有必要使用自定义样式,如果你使用内联样式或自定义选择器,则会产生任何差异。我想你需要这样做,使用预定义的引导类对表单进行样式设置,例如
给它一个类
并把它放在
中,你也可以使用,这里有一个例子让你有完整的想法,你可以继续使用它来处理modal中的其余元素
.nodisplay {
display: none;
color: red;
font-weight: bold;
}
<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">×</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>
#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;
}