Modals

Button modal action

= ui.nfg :button, body: 'Modal Trigger Button', modal: '#test_modal'
= ui.nfg :modal, id: 'test_modal', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal" href="#">Modal Trigger Button</a>
<div class="modal fade" id="test_modal" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

Button modal action that opens a modal with a custom footer

Modal Trigger Button

= ui.nfg :button, body: 'Modal Trigger Button', modal: '#test_modal_with_footer'
= ui.nfg :modal, id: 'test_modal_with_footer', title: 'Test Modal', render_in_body: false do
  = ui.nfg :modal_body, body: 'Modal body goes here'
  = ui.nfg :modal_footer do
    = ui.nfg :button, dismiss: :modal, body: 'Close Modal', icon: 'times'

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal_with_footer" href="#">Modal Trigger Button</a>
<div class="modal fade" id="test_modal_with_footer" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here</div>
      <div class="modal-footer"><a class="btn btn-primary" data-dismiss="modal" href="#">Close Modal<i aria-hidden="true" class="fa fa-times ml-1"></i></a></div>
    </div>
  </div>
</div>

Disabled button modal

Modal Trigger Button

= ui.nfg :button, body: 'Modal Trigger Button', modal: '#test_modal2', disabled: true, tooltip: 'Test tooltip'
= ui.nfg :modal, id: 'test_modal2', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<span data-toggle="tooltip" data-placement="top" data-html="true" title="Test tooltip" class="d-inline-block" tabindex="0"><a class="btn disabled btn-primary" data-toggle="modal" data-target="#test_modal2" href="#" tabindex="-1" style="pointer-events: none;">Modal Trigger Button</a></span>
<div class="modal fade" id="test_modal2" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

Dropdown item modal action

= ui.nfg :dropdown, button: 'Modalable Dropdown Items' do
  = ui.nfg :dropdown_menu do
    = ui.nfg :dropdown_item, body: 'Modal Firing Dropdown Item', icon: 'rocket', modal: '#test_modal3'
    = ui.nfg :dropdown_item, body: 'Modal Firing Dropdown Item', icon: 'rocket', modal: '#test_modal3', href: '#will_not_overwrite'
    = ui.nfg :dropdown_item, body: 'Modal Firing Dropdown Item', icon: 'rocket', modal: '#test_modal3'
= ui.nfg :modal, id: 'test_modal3', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<div class="dropdown"><button class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Modalable Dropdown Items</button>
  <div class="dropdown-menu"><a class="dropdown-item" data-toggle="modal" data-target="#test_modal3" href="#"><i aria-hidden="true" class="fa fa-rocket fa-fw text-center mr-1"></i> Modal Firing Dropdown Item</a><a class="dropdown-item" data-toggle="modal" data-target="#test_modal3" href="#will_not_overwrite"><i aria-hidden="true" class="fa fa-rocket fa-fw text-center mr-1"></i> Modal Firing Dropdown Item</a><a class="dropdown-item" data-toggle="modal" data-target="#test_modal3" href="#"><i aria-hidden="true" class="fa fa-rocket fa-fw text-center mr-1"></i> Modal Firing Dropdown Item</a></div>
</div>
<div class="modal fade" id="test_modal3" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

Modal with sizes

Small Modal

= ui.nfg :button, body: 'Small Modal', modal: '#test_modal_sm'
= ui.nfg :modal, :sm, id: 'test_modal_sm', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal_sm" href="#">Small Modal</a>
<div class="modal fade" id="test_modal_sm" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

Large Modal

= ui.nfg :button, body: 'Large Modal', modal: '#test_modal_lg'
= ui.nfg :modal, :lg, id: 'test_modal_lg', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal_lg" href="#">Large Modal</a>
<div class="modal fade" id="test_modal_lg" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

X-Large Modal

= ui.nfg :button, body: 'X-Large Modal', modal: '#test_modal_xl'
= ui.nfg :modal, :xl, id: 'test_modal_xl', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal_xl" href="#">X-Large Modal</a>
<div class="modal fade" id="test_modal_xl" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

Cover Modal

= ui.nfg :button, body: 'Cover Modal', modal: '#test_modal_cover'
= ui.nfg :modal, :cover, id: 'test_modal_cover', title: 'Test Modal', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal_cover" href="#">Cover Modal</a>
<div class="modal fade" id="test_modal_cover" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-cover" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Test Modal</h5>
        <button class="btn close" data-dismiss="modal" aria-label="Close" type="button"><span aria-hidden="true">&times;</span></button></div>
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>

Modal without title removes dismiss fuctionlity

Modal Trigger Button

= ui.nfg :button, body: 'Modal Trigger Button', modal: '#test_modal_no_title'
= ui.nfg :modal, id: 'test_modal_no_title', footer: 'Modal footer (as a component option only)' do
  Modal body goes here

<a class="btn btn-primary" data-toggle="modal" data-target="#test_modal_no_title" href="#">Modal Trigger Button</a>
<div class="modal fade" id="test_modal_no_title" role="dialog" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">Modal body goes here
      </div>
      <div class="modal-footer">Modal footer (as a component option only)</div>
    </div>
  </div>
</div>