Modal

Use LCUI’s modal component to add dialogs to your application for lightboxes, user notifications, or completely custom content.

Examples

Modal components

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.

  1. <w type="modal" class="modal">
  2.   <w class="modal-dialog">
  3.     <w class="modal-content">
  4.       <w class="modal-header">
  5.         <w type="h5" class="modal-title">Modal Title</w>
  6.         <w type="button" data-dismiss="modal" class="close">&#215;</w>
  7.       </w>
  8.       <w class="modal-body">
  9.         <w type="p">Modal body text goes here.</w>
  10.       </w>
  11.       <w class="modal-footer">
  12.         <w type="button" class="btn">Close</w>
  13.         <w type="button" class="btn btn-primary">Save changes</w>
  14.       </w>
  15.     </w>
  16.   </w>
  17. </w>

Demo

Toggle a working modal demo by clicking the button below. It will slide down in from the top of the page.

  1. <!-- Button trigger modal -->
  2. <w type="button" class="btn btn-primary" data-toggle="modal" data-target="example-modal">
  3.   Launch demo modal
  4. </w>
  6. <!-- Modal -->
  7. <w id="example-modal" type="modal" class="modal">
  8.   <w class="modal-dialog">
  9.     <w class="modal-content">
  10.       <w class="modal-header">
  11.         <w type="h5" class="modal-title">Modal Title</w>
  12.         <w type="button" data-dismiss="modal" class="close">&#215;</w>
  13.       </w>
  14.       <w class="modal-body">
  15.         <w type="p">Woohoo, you're reading this text in a modal!</w>
  16.       </w>
  17.       <w class="modal-footer">
  18.         <w type="button" class="btn" data-dismiss="modal">Close</w>
  19.         <w type="button" class="btn btn-primary">Save changes</w>
  20.       </w>
  21.     </w>
  22.   </w>
  23. </w>

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

  1. <!-- Button trigger modal -->
  2. <w type="button" class="btn btn-primary" data-toggle="modal" data-target="example-modal-2">
  3.   Launch demo modal
  4. </w>
  6. <!-- Modal -->
  7. <w id="example-modal-2" type="modal" class="modal">
  8.   <w class="modal-dialog">
  9.     <w class="modal-content">
  10.       <w class="modal-header">
  11.         <w type="h5" class="modal-title">Modal Title</w>
  12.         <w type="button" data-dismiss="modal" class="close">&#215;</w>
  13.       </w>
  14.       <w class="modal-body">
  15.         <w type="p">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</w>
  17.         <w type="p">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</w>
  19.         <w type="p">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</w>
  21.         <w type="p">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</w>
  23.         <w type="p">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</w>
  25.         <w type="p">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</w>
  27.         <w type="p">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</w>
  29.         <w type="p">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</w>
  31.         <w type="p">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</w>
  33.         <w type="p">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</w>
  35.         <w type="p">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</w>
  37.         <w type="p">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</w>
  39.         <w type="p">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</w>
  41.         <w type="p">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</w>
  43.         <w type="p">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</w>
  45.         <w type="p">Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</w>
  47.         <w type="p">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</w>
  49.         <w type="p">Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</w>
  50.       </w>
  51.       <w class="modal-footer">
  52.         <w type="button" class="btn" data-dismiss="modal">Close</w>
  53.         <w type="button" class="btn btn-primary">Save changes</w>
  54.       </w>
  55.     </w>
  56.   </w>
  57. </w>