rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

get modal working with new data-attrs

Browse Source
This commit is contained in:
Jacob Thornton 2011-10-05 00:14:55 -07:00
parent a91a407bd6
commit c9669be1ec
2 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/javascript.html
View File

@ -12,7 +12,7 @@
<![endif]--> <![endif]-->
<!-- Le javascript --> <!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script> <script src="assets/js/google-code-prettify/prettify.js"></script>
<script>$(function () { prettyPrint() })</script> <script>$(function () { prettyPrint() })</script>
<script src="../js/bootstrap-modal.js"></script> <script src="../js/bootstrap-modal.js"></script>
@ -182,7 +182,7 @@ $('#my-modal').bind('hidden', function () {
<!-- sample modal content --> <!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade"> <div id="modal-from-dom" class="modal hide fade">
<div class="modal-header"> <div class="modal-header">
<a href="#" class="close js-dismiss">&times;</a> <a href="#" class="close" data-modal-dismiss="true" >&times;</a>
<h3>Modal Heading</h3> <h3>Modal Heading</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
@ -190,12 +190,10 @@ $('#my-modal').bind('hidden', function () {
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn primary">Save changes</a> <a href="#" class="btn primary">Save changes</a>
<a href="#" class="btn js-dismiss">Close</a> <a href="#" class="btn" data-modal-dismiss="true" >Close</a>
</div> </div>
</div> </div>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button> <button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
</div> </div>
</div> </div>
</section> </section>
@ -221,7 +219,7 @@ $('#my-modal').bind('hidden', function () {
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;ul class="tabs"&gt; &lt;ul class="tabs"&gt;
&lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class="dropdown" data-dropdown="dropdown" &gt; &lt;li class="dropdown" data-dropdown="true" &gt;
&lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt; &lt;a href="#" class="dropdown-toggle"&gt;Dropdown&lt;/a&gt;
&lt;ul class="dropdown-menu"&gt; &lt;ul class="dropdown-menu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Secondary link&lt;/a&gt;&lt;/li&gt;
@ -231,7 +229,6 @@ $('#my-modal').bind('hidden', function () {
&lt;/ul&gt; &lt;/ul&gt;
&lt;/li&gt; &lt;/li&gt;
&lt;/ul&gt;</pre> &lt;/ul&gt;</pre>
<p><span class="label notice">Notice</span> If your ui has several dropdowns, consider adding the <code>data-dropdown</code> attribute to a more significant container element like <code>.tabs</code> or <code>.topbar</code>.
<h3>Methods</h3> <h3>Methods</h3>
<h4>$().dropdown()</h4> <h4>$().dropdown()</h4>
<p> <p>
@ -239,7 +236,7 @@ $('#my-modal').bind('hidden', function () {
</p> </p>
<h3>Demo</h3> <h3>Demo</h3>
<div class="topbar-wrapper"> <div class="topbar-wrapper">
<div id="topbar-example" class="topbar" data-dropdown="dropdown"> <div id="topbar-example" class="topbar">
<div class="topbar-inner"> <div class="topbar-inner">
<div class="container"> <div class="container">
<a class="brand" href="#">Project Name</a> <a class="brand" href="#">Project Name</a>
@ -252,7 +249,7 @@ $('#my-modal').bind('hidden', function () {
</form> </form>
<ul class="nav secondary-nav"> <ul class="nav secondary-nav">
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown 1</a> <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 1</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li> <li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -261,7 +258,7 @@ $('#my-modal').bind('hidden', function () {
</ul> </ul>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown 2</a> <a href="#" class="dropdown-toggle" data-dropdown="true">Dropdown 2</a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li> <li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li> <li><a href="#">Something else here</a></li>
@ -645,11 +642,11 @@ $('#my-modal').bind('hidden', function () {
<pre class="prettyprint linenums">$(".alert-message").alert('close')</pre> <pre class="prettyprint linenums">$(".alert-message").alert('close')</pre>
<h3>Demo</h3> <h3>Demo</h3>
<div class="alert-message warning fade in" data-alert="alert" > <div class="alert-message warning fade in" data-alert="alert" >
<a class="close" href="#">&times;</a> <a class="close" data-alert-dismiss="true" href="#">&times;</a>
<p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p> <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
</div> </div>
<div class="alert-message block-message error fade in" data-alert="alert" > <div class="alert-message block-message error fade in" data-alert="alert" >
<a class="close" href="#">&times;</a> <a class="close" data-alert-dismiss="true" href="#">&times;</a>
<p><strong>Oh snap! You got an error!</strong> 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><strong>Oh snap! You got an error!</strong> 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>
<div class="alert-actions"> <div class="alert-actions">
<a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a> <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>

2
js/bootstrap-modal.js vendored
View File

@ -55,7 +55,7 @@
var Modal = function ( content, options ) { var Modal = function ( content, options ) {
this.settings = $.extend({}, $.fn.modal.defaults, options) this.settings = $.extend({}, $.fn.modal.defaults, options)
this.$element = $(content) this.$element = $(content)
.delegate('[data-modal-dismiss]', $.proxy(this.hide, this)) .delegate('[data-modal-dismiss]', 'click', $.proxy(this.hide, this))
if ( this.settings.show ) { if ( this.settings.show ) {
this.show() this.show()