<div class="span4">
<h2>Close icon</h2>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
- <p><a class="close" style="float: none;">×</a></p>
-<pre class="prettyprint linenums"><a class="close">&times;</a></pre>
+ <p><button class="close" style="float: none;">×</button></p>
+<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
+ <p>iOS devices require an href="#" for click events if you rather use an anchor.</p>
+<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
</div><!--/span-->
</div><!--/row-->
</section>
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
- <a href="#" class="close" data-dismiss="modal">×</a>
+ <button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
- <a class="close" data-dismiss="modal" >×</a>
+ <button class="close" data-dismiss="modal">×</button>
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<pre class="prettyprint linenums">
<div class="modal" id="myModal">
<div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
+ <button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<h2>Example alerts</h2>
<p>The alerts plugin works on regular alert messages, and block messages.</p>
<div class="alert fade in">
- <a class="close" data-dismiss="alert" href="#">×</a>
+ <button class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
<div class="alert alert-block alert-error fade in">
- <a class="close" data-dismiss="alert" href="#">×</a>
+ <button class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<div class="span4">
<h2>{{_i}}Close icon{{/i}}</h2>
<p>{{_i}}Use the generic close icon for dismissing content like modals and alerts.{{/i}}</p>
- <p><a class="close" style="float: none;">×</a></p>
-<pre class="prettyprint linenums"><a class="close">&times;</a></pre>
+ <p><button class="close" style="float: none;">×</button></p>
+<pre class="prettyprint linenums"><button class="close">&times;</button></pre>
+ <p>{{_i}}iOS devices require an href="#" for click events if you rather use an anchor.{{/i}}</p>
+<pre class="prettyprint linenums"><a class="close" href="#">&times;</a></pre>
</div><!--/span-->
</div><!--/row-->
</section>
<div class="well modal-example" style="background-color: #888; border: none;">
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
<div class="modal-header">
- <a href="#" class="close" data-dismiss="modal">×</a>
+ <button class="close" data-dismiss="modal">×</button>
<h3>{{_i}}Modal header{{/i}}</h3>
</div>
<div class="modal-body">
<!-- sample modal content -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
- <a class="close" data-dismiss="modal" >×</a>
+ <button class="close" data-dismiss="modal">×</button>
<h3>{{_i}}Modal Heading{{/i}}</h3>
</div>
<div class="modal-body">
<pre class="prettyprint linenums">
<div class="modal" id="myModal">
<div class="modal-header">
- <a class="close" data-dismiss="modal">×</a>
+ <button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<h2>{{_i}}Example alerts{{/i}}</h2>
<p>{{_i}}The alerts plugin works on regular alert messages, and block messages.{{/i}}</p>
<div class="alert fade in">
- <a class="close" data-dismiss="alert" href="#">×</a>
+ <button class="close" data-dismiss="alert">×</button>
<strong>{{_i}}Holy guacamole!{{/i}}</strong> {{_i}}Best check yo self, you're not looking too good.{{/i}}
</div>
<div class="alert alert-block alert-error fade in">
- <a class="close" data-dismiss="alert" href="#">×</a>
+ <button class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">{{_i}}Oh snap! You got an error!{{/i}}</h4>
<p>{{_i}}Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.{{/i}}</p>
<p>