change all anchor alert closes to buttons

twbs · Mar 26, 2012 · 473e571 · 473e571
1 parent ea43735
commit 473e571
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 12 deletions.
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -1975,6 +1975,13 @@ table .span24 {
   filter: alpha(opacity=40);
   cursor: pointer;
 }
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}
 .btn {
   display: inline-block;
   *display: inline;

diff --git a/docs/components.html b/docs/components.html
@@ -1684,19 +1684,19 @@ <h3>Goes great with javascript</h3>
       <h3>Example alerts</h3>
       <p>Wrap your message and an optional close icon in a div with simple class.</p>
       <div class="alert">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>Warning!</strong> Best check yo self, you're not looking too good.
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;
+  &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
   &lt;strong&gt;Warning!&lt;/strong&gt; Best check yo self, you're not looking too good.
 &lt;/div&gt;
 </pre>
       <p><span class="label label-info">Heads up!</span> iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for fully responsive and dismissable alerts.</p>
       <p>Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.</p>
       <div class="alert alert-block">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <h4 class="alert-heading">Warning!</h4>
         <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
@@ -1715,7 +1715,7 @@ <h2>Contextual alternatives <small>Add optional classes to change an alert's con
     <div class="span4">
       <h3>Error or danger</h3>
       <div class="alert alert-error">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>Oh snap!</strong> Change a few things up and try submitting again.
       </div>
 <pre class="prettyprint linenums">
@@ -1727,7 +1727,7 @@ <h3>Error or danger</h3>
     <div class="span4">
       <h3>Success</h3>
       <div class="alert alert-success">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>Well done!</strong> You successfully read this important alert message.
       </div>
 <pre class="prettyprint linenums">
@@ -1739,7 +1739,7 @@ <h3>Success</h3>
     <div class="span4">
       <h3>Information</h3>
       <div class="alert alert-info">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
       </div>
 <pre class="prettyprint linenums">

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
@@ -1607,19 +1607,19 @@
       <h3>{{_i}}Example alerts{{/i}}</h3>
       <p>{{_i}}Wrap your message and an optional close icon in a div with simple class.{{/i}}</p>
       <div class="alert">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Warning!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
       </div>
 <pre class="prettyprint linenums">
 &lt;div class="alert"&gt;
-  &lt;a class="close" data-dismiss="alert" href="#"&gt;&times;&lt;/a&gt;
+  &lt;button class="close" data-dismiss="alert"&gt;&times;&lt;/button&gt;
   &lt;strong&gt;{{_i}}Warning!{{/i}}&lt;/strong&gt; {{_i}}Best check yo self, you're not looking too good.{{/i}}
 &lt;/div&gt;
 </pre>
       <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}iOS devices require an <code>href="#"</code> for the dismissal of alerts. Be sure to include it and the data attribute for fully responsive and dismissable alerts.{{/i}}</p>
       <p>{{_i}}Easily extend the standard alert message with two optional classes: <code>.alert-block</code> for more padding and text controls and <code>.alert-heading</code> for a matching heading.{{/i}}</p>
       <div class="alert alert-block">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <h4 class="alert-heading">{{_i}}Warning!{{/i}}</h4>
         <p>{{_i}}Best check yo self, you're not looking too good.{{/i}} Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
       </div>
@@ -1638,7 +1638,7 @@
     <div class="span4">
       <h3>{{_i}}Error or danger{{/i}}</h3>
       <div class="alert alert-error">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Oh snap!{{/i}}</strong> {{_i}}Change a few things up and try submitting again.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1650,7 +1650,7 @@
     <div class="span4">
       <h3>{{_i}}Success{{/i}}</h3>
       <div class="alert alert-success">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Well done!{{/i}}</strong> {{_i}}You successfully read this important alert message.{{/i}}
       </div>
 <pre class="prettyprint linenums">
@@ -1662,7 +1662,7 @@
     <div class="span4">
       <h3>{{_i}}Information{{/i}}</h3>
       <div class="alert alert-info">
-        <a class="close" data-dismiss="alert" href="#">&times;</a>
+        <button class="close" data-dismiss="alert">&times;</button>
         <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}This alert needs your attention, but it's not super important.{{/i}}
       </div>
 <pre class="prettyprint linenums">

diff --git a/less/close.less b/less/close.less
@@ -16,3 +16,14 @@
     cursor: pointer;
   }
 }
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+button.close {
+  padding: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+}