dashing-framework

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/example.css" rel="stylesheet"> <title>Modal</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="../../../bower_components/dash-modal.js/dist/dash-modal.js"></script> <script src="../../scripts/scripts.js"></script> <script src="../../scripts/prism.js"></script> <script src="../../../dist/application.js"></script> </head> <body class="example-body"> <div data-id="modal-container"></div> <div class="main-content"> <div id="sidebarNavigation" class="example-sidebar"></div> <div class="sidebar--overlay is-hidden"></div> <div class="main" id="main-content"> <div class="page-header"> <button class="button--sidebar-icon float-left"><i class="sidebar-icon--menu"></i></button> <h1>Modal</h1> <a href="http://developers.samaritanministries.org/developers/dash-modal.js/" target="_blank" class="button button--small button--smooth float-right"> View Guidelines </a> </div> <div class="app-content"> <div class="row"> <div class="column column--full"> <blockquote class="warning" style="margin-top: 2rem;"> <strong>Component Dependency</strong> <p>Dashing uses the <a href="https://github.com/samaritanministries/dash-modal.js" target="_blank">dash-modal.js</a> component to deliver modals. To utilize these styles, you must install this component into your project.</p> </blockquote> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header no-margin--top">Default Modal <button class="button button--transparent button--copy-link" data-id="copyurl" id="Default_Modal"></h2> <div class="row example-container"> <div class="column column--full"> <button data-id="show-modal-default">Open Modal</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="modal-header"> <h3>Modal Header</h3> </div> <div class="modal-content"> <div class="row"> <div class="column column--full"> <p>Modal content</p> </div> </div> </div> <div class="modal-footer align-left"> Modal footer </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Small Modal <button class="button button--transparent button--copy-link" data-id="copyurl" id="Small_Modal"></h2> <div class="row example-container"> <div class="column column--full"> <button data-id="show-modal-small">Open Modal</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="modal-header"> <h3>Modal Header</h3> </div> <div class="modal-content"> <div class="row"> <div class="column column--full"> <p>Modal content</p> </div> </div> </div> <div class="modal-footer align-left"> Modal footer </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Large Modal <button class="button button--transparent button--copy-link" data-id="copyurl" id="Large_Modal"></h2> <div class="row example-container"> <div class="column column--full"> <button data-id="show-modal-large">Open Modal</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="modal-header"> <h3>Modal Header</h3> </div> <div class="modal-content"> <div class="row"> <div class="column column--full"> <p>Modal content</p> </div> </div> </div> <div class="modal-footer align-left"> Modal footer </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Data Modal Example <button class="button button--transparent button--copy-link" data-id="copyurl" id="Data_Modal"></h2> <p>This is an example of a modal used to display and edit data.</p> <div class="row example-container"> <div class="column column--full"> <button class="button button--transparent" data-id="show-modal-data">Edit Member</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="modal-header"> <h3>Edit Member</h3> </div> <div class="modal-content"> <fieldset class="row row--nested"> <div class="column column--half column--nested"> <label for="firstName">First Name</label> <input type="text" name="firstName" value="Ryan"> </div> <div class="column column--half column--nested"> <label for="lastName">Last Name</label> <input type="text" name="lastName" value="Fitz"> </div> </fieldset> <fieldset class="row row--nested"> <div class="column column--half column--nested"> <label for="dateOfBirth">Date of Birth</label> <input type="date" name="dateOfBirth" value="1986-01-18"> </div> <div class="column column--half column--nested select--has-icon"> <label for="gender">Gender</label> <select class="" name="gender"> <option value="male">Male</option> <option value="female">Female</option> </select> </div> </fieldset> </div> <div class="modal-footer"> <button data-action="update-need-types" class="button button--smooth button--primary">Save</button> <button data-id="close" class="button button--transparent button--grey">Cancel</button> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Video Modal Example <button class="button button--transparent button--copy-link" data-id="copyurl" id="Video_Modal"></h2> <p>Use the modal size <code class="example-text">modal-large</code> to display videos within a modal.</p> <div class="row example-container"> <div class="column column--full"> <button class="button button--smooth" data-id="show-modal-video"> <i class="dashing-icon dashing-icon--play"></i> Learn More </button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="modal-header"> <h3>Modal Header</h3> </div> <div class="modal-content has-video"> <iframe src="https://player.vimeo.com/video/232680932?title=0&badge=0&portrait=0&byline=0&color=754d85&autoplay=true" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <div class="modal-footer align-center"> <button data-id="close" class="button button--smooth button--blue">Finish watching video</button> </div></code> </pre> </div> </div> <div class="row"> <div class="column column--full"> <h2 class="example-header">Info Dialog Example <button class="button button--transparent button--copy-link" data-id="copyurl" id="Info_Modal"></h2> <p>Use dialogs to display quick, informative content to your user.</p> <div class="row example-container"> <div class="column column--full"> <button class="button button--transparent" data-id="show-modal-dialog">Learn More</button> </div> </div> <div class="code-toggle"><i class="icon--code"></i></div> <pre><code class="language-html"><div class="modal-header"> <h3>Default Modal</h3> </div> <div class="modal-content"> <div class="row"> <div class="column column--full"> <h3>What should I put inside a modal?</h3> <p>All modal content should be contained within a <code class="example-text">modal-content</code> element.</p> <p>If your modal is strictly informational and no action is required from your user, you do not need to include a <code class="example-text">modal-footer</code> element. The user can dismiss the modal by clicking the <code class="example-text">×</code>, hitting their <code class="example-text">esc</code> key or clicking ouside of the modal on the overlay.</p> </div> </div> </div></code> </pre> </div> </div> </body> </html>