mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 02:24:19 +02:00
Code Issues Releases Wiki Activity

Add important flag to .show/.hide utility classes; remove .hide requirement from modals

Browse Source
This commit is contained in:
Mark Otto
2012-12-20 13:53:38 -08:00
parent a5e04c0799
commit 6bd5dc7d9f
5 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/assets/css/bootstrap.css vendored
View File

@@ -4021,6 +4021,7 @@ fieldset[disabled] .navbar-inverse .btn-navbar {
top: 10%; top: 10%;
left: 50%; left: 50%;
z-index: 1050; z-index: 1050;
display: none;
width: 560px; width: 560px;
margin-left: -280px; margin-left: -280px;
background-color: #fff; background-color: #fff;
@@ -4911,11 +4912,11 @@ a.badge:hover {
} }
.hide { .hide {
display: none; display: none !important;
} }
.show { .show {
display: block; display: block !important;
} }
.invisible { .invisible {

8
docs/javascript.html
View File

@@ -186,7 +186,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3> <h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p> <p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;"> <div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3> <h3>Modal header</h3>
@@ -201,7 +201,7 @@ $('#myModal').on('show', function (e) {
</div> </div>
</div> </div>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt; &lt;div class="modal fade"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3&gt;Modal header&lt;/h3&gt;
@@ -219,7 +219,7 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3> <h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3> <h3 id="myModalLabel">Modal Heading</h3>
@@ -258,7 +258,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt; &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt!-- Modal --&gt; &lt!-- Modal --&gt;
&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;

8
docs/templates/pages/javascript.mustache vendored
View File

@@ -119,7 +119,7 @@ $('#myModal').on('show', function (e) {
<h3>Static example</h3> <h3>Static example</h3>
<p>A rendered modal with header, body, and set of actions in the footer.</p> <p>A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bs-docs-example" style="background-color: #f5f5f5;"> <div class="bs-docs-example" style="background-color: #f5f5f5;">
<div class="modal" style="position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px; z-index: 1; max-width: 100%;"> <div class="modal" style="position: relative; top: auto; left: auto; right: auto; display: block; margin: 0 auto 20px; z-index: 1; max-width: 100%;">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Modal header</h3> <h3>Modal header</h3>
@@ -134,7 +134,7 @@ $('#myModal').on('show', function (e) {
</div> </div>
</div>{{! /example }} </div>{{! /example }}
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;div class="modal hide fade"&gt; &lt;div class="modal fade"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
&lt;h3&gt;Modal header&lt;/h3&gt; &lt;h3&gt;Modal header&lt;/h3&gt;
@@ -152,7 +152,7 @@ $('#myModal').on('show', function (e) {
<h3>Live demo</h3> <h3>Live demo</h3>
<p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p> <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
<!-- sample modal content --> <!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3 id="myModalLabel">Modal Heading</h3> <h3 id="myModalLabel">Modal Heading</h3>
@@ -191,7 +191,7 @@ $('#myModal').on('show', function (e) {
&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt; &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
&lt!-- Modal --&gt; &lt!-- Modal --&gt;
&lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt; &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
&lt;div class="modal-header"&gt; &lt;div class="modal-header"&gt;
&lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt; &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&times;&lt;/button&gt;
&lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt; &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;

1
less/modals.less
View File

@@ -26,6 +26,7 @@
top: 10%; top: 10%;
left: 50%; left: 50%;
z-index: @zindex-modal; z-index: @zindex-modal;
display: none;
width: 560px; width: 560px;
margin-left: -280px; margin-left: -280px;
background-color: #fff; background-color: #fff;

4
less/utilities.less
View File

@@ -21,10 +21,10 @@
// ------------------------- // -------------------------
.hide { .hide {
display: none; display: none !important;
} }
.show { .show {
display: block; display: block !important;
} }
.invisible { .invisible {
visibility: hidden; visibility: hidden;