<p>A modal can be included anywhere on the page. On initialization a modal's current size will be cached, and the element will be detached from the dom and moved inside a dimmer.</p>
<div class="ui info message">
<div class="header">Why move?</div>
<p>Moving a modal to inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.</p>
<div class="header">Why move modal content?</div>
<p>Having a modal inside the page dimmer allows for 3D animations without having the 3D perspective settings alter the rest of the page content. Additionally, content outside the dimmer can be blurred or altered without affecting the modal's content.</p>
</div>
<div class="code" data-type="javascript">
$('.ui.modal')
@ -108,6 +109,81 @@ type : 'UI Module'
</div>
</div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Standard</h4>
<p>A standard modal</p>
<div class="code" data-demo="true">
$('.test.modal')
.modal('show')
;
</div>
</div>
<div class="example">
<h4 class="ui header">Basic</h4>
<p>A modal can reduce its complexity</p>
<div class="code" data-demo="true">
$('.basic.modal')
.modal('show')
;
</div>
</div>
<h2 class="ui dividing header">States</h2>
<div class="example">
<h4 class="ui header">Active</h4>
<p>An active modal is visible on the page</p>
<div class="code" data-type="html">
<div class="active ui modal">...</div>
</div>
</div>
<h2 class="ui dividing header">Examples</h2>
<div class="no example">
<h4 class="ui header">Forcing a Choice</h4>
<p>You can disable a modal's dimmer from being closed by click to force a user to make a choice</p>
<div class="code" data-demo="true">
$('.basic.modal')
.modal('setting', 'closable', false)
.modal('show')
;
</div>
</div>
<div class="no example">
<h4 class="ui header">Transitions</h4>
<p>A dimmer can use any named ui transition.</p>
<div class="ui selection dropdown">
<input type="hidden" name="transition">
<i class="dropdown icon"></i>
<div class="default text">Choose transition</div>
<div class="menu">
<div class="item">Horizontal Flip</div>
<div class="item">Vertical Flip</div>
<div class="item">Fade Up</div>
<div class="item">Fade</div>
<div class="item">Scale</div>
</div>
</div>
<div class="ui clearing divider"></div>
<div class="code">
$('.selection')
.dropdown({
onChange: function(value) {
$('.test.modal')
.modal('setting', 'transition', value)
.modal('show')
;
}
})
;
</div>
</div>
<h2 class="ui dividing header">Behavior</h2>
<div class="no example">
@ -138,38 +214,48 @@ type : 'UI Module'
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Basic</h4>
<p>A modal can reduce its complexity</p>
<div class="code" data-demo="true">
$('.basic.modal')
.modal({
closable: false
})
.modal('show')
;
</div>
</div>
<h2 class="ui dividing header">States</h2>
Additionally, all the following behaviors can be called using the syntax <code>$('.foo').modal('behavior name', argumentOne, argumentTwo)</code>
jlukic
11 years ago