Check with your designers to help you design this section
Check with your designers to help you design this section
RAUL modals are simply a skin of Bootstrap modals. If triggered by a button, by default,
the modal is dismissible by cicking on the backdrop. This can be turned off by adding
data-backdrop="static" to the button. In the same fashion, by default you
can close the modal by hitting the escape key. This can be changed by adding
data-keyboard="false" to the button.
Also, the right top corner close button does not exist as a default option, but it can
be added if needed.
<button
class="button button-default"
data-toggle="modal"
data-target="#my-modal"
>
Launch Modal with left aligned content
</button>
<!-- Modal -->
<div
class="raul-modal modal fade"
id="my-modal"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title Here</h5>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec qu
</p>
</div>
<div class="modal-footer">
<hr class="raul-modal-divider">
<div class="raul-modal-btn-container">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
<button
class="button button-default"
data-toggle="modal"
data-target="#my-modal-centered"
>
Launch Modal with centered content
</button>
<!-- Modal -->
<div
class="raul-modal raul-modal-centered modal fade"
id="my-modal-centered"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title Here</h5>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes
</p>
</div>
<div class="modal-footer">
<hr class="raul-modal-divider">
<div class="raul-modal-btn-container">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Trigger Button -->
<button
class="right-modal button button-default"
data-toggle="modal"
data-target="#single-aside"
>
Launch single aside modal
</button>
<!-- Modal -->
<div
class="modal right slide raul-aside-modal raul-single-aside pr-0"
id="single-aside"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Single aside modal title</h5>
<span class="modal-subheader">Subline text goes here</span>
</div>
<div class="modal-body">
<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.
</p>
<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.
</p>
<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.
</p>
<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.
</p>
<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.
</p>
<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.
</p>
<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.
</p>
</div>
<div class="modal-footer clearfix">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<button
class="right-modal button button-default"
data-toggle="modal"
data-target="#double-aside"
>
Launch double aside modal
</button>
<!-- Modal -->
<div
class="modal right slide raul-aside-modal raul-double-aside pr-0"
id="double-aside"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Double aside modal title</h5>
<span class="modal-subheader">Subline text goes here</span>
</div>
<div class="modal-body">
<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.</p>
</div>
<div class="modal-footer clearfix">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger Button -->
<button
class="right-modal button button-default"
data-toggle="modal"
data-target="#single-tabbed-aside"
>
Launch single aside modal with tabs
</button>
<!-- Modal -->
<div
class="modal right slide raul-aside-modal raul-aside-modal-tabbed raul-single-aside pr-0"
id="single-tabbed-aside"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Single aside modal title</h5>
<span class="modal-subheader">Subline text goes here</span>
</div>
<div class="modal-body">
<!-- Nav tabs -->
<ul class="raul-nav nav nav-tabs raul-nav-underline nav-justified" role="tablist">
<li class="nav-item">
<a
class="nav-link nav-dark active"
href="#tab-1"
aria-controls="home"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
tab option 1
</a>
</li>
<li class="nav-item">
<a
class="nav-link nav-dark"
href="#tab-2"
aria-controls="profile"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
tab option 2
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div role="tabpanel" class="tab-pane active" id="tab-1">tab1 content...</div>
<div role="tabpanel" class="tab-pane" id="tab-2">tab2 content...</div>
</div>
</div>
<div class="modal-footer clearfix">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<!-- Modal Trigger Button -->
<button
class="right-modal button button-default"
data-toggle="modal"
data-target="#double-tabbed-aside"
>
Launch double aside modal with tabs
</button>
<!-- Modal -->
<div
class="modal right slide raul-aside-modal raul-aside-modal-tabbed raul-double-aside pr-0"
id="double-tabbed-aside"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Single aside modal title</h5>
<span class="modal-subheader">Subline text goes here</span>
</div>
<div class="modal-body">
<!-- Nav tabs -->
<ul class="raul-nav nav nav-tabs raul-nav-underline nav-justified" role="tablist">
<li class="nav-item">
<a
class="nav-link nav-dark active"
href="#tab-3"
aria-controls="home"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
tab option 1
</a>
</li>
<li class="nav-item">
<a
class="nav-link nav-dark"
href="#tab-4"
aria-controls="profile"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
tab option 2
</a>
</li>
<li class="nav-item">
<a
class="nav-link nav-dark"
href="#tab-5"
aria-controls="profile"
role="tab"
data-toggle="tab"
aria-expanded="false"
>
tab option 3
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="raul-tab-content tab-content">
<div role="tabpanel" class="tab-pane active" id="tab-3">
tab1 content...
<h3>Paragraph 1</h3>
<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.
</p>
<h3>Paragraph 2</h3>
<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.
</p>
<h3>Paragraph 3</h3>
<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.
</p>
<h3>Paragraph 4</h3>
<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.
</p>
<h3>Paragraph 5</h3>
<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.
</p>
<h3>Paragraph 6</h3>
<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.
</p>
<h3>Paragraph 7</h3>
<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.
</p>
<h3>Paragraph 8</h3>
<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.
</p>
<h3>Paragraph 9</h3>
<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.
</p>
<h3>Paragraph 10</h3>
<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.
</p>
<h3>Paragraph 11</h3>
<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.
</p>
<h3>Paragraph 12</h3>
<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.
</p>
<h3>Paragraph 13</h3>
<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.
</p>
<h3>Paragraph 14</h3>
<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.
</p>
<h3>Paragraph 15</h3>
<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.
</p>
<h3>Paragraph 16</h3>
<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.
</p>
<h3>Paragraph 17</h3>
<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.
</p>
<h3>Paragraph 18</h3>
<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.
</p>
<h3>Paragraph 19</h3>
<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.
</p>
<h3>Paragraph 20</h3>
<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.
</p>
<h3>Paragraph 21</h3>
<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.
</p>
<h3>Paragraph 22</h3>
<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.
</p>
<h3>Paragraph 23</h3>
<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.
</p>
<h3>Paragraph 24</h3>
<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.
</p>
<h3>Paragraph 25</h3>
<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.
</p>
<h3>Paragraph 26</h3>
<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.
</p>
<h3>Paragraph 27</h3>
<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.
</p>
<h3>Paragraph 28</h3>
<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.
</p>
<h3>Paragraph 29</h3>
<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.
</p>
<h3>Paragraph 30</h3>
<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.
</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab-4">tab2 content...</div>
<div role="tabpanel" class="tab-pane" id="tab-5">tab3 content...</div>
</div>
</div>
<div class="modal-footer clearfix">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<button
class="button button-default"
data-toggle="modal"
data-target="#close-button-modal"
>
Launch Modal with close button
</button>
<!-- Modal -->
<div
class="raul-modal raul-modal-centered modal fade"
id="close-button-modal"
tabindex="-1"
role="dialog"
aria-labelledby="example-modal-label"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Close button -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Modal Title Here</h5>
</div>
<div class="modal-body">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes
</p>
</div>
<div class="modal-footer">
<hr class="raul-modal-divider">
<div class="raul-modal-btn-container">
<button
type="button"
class="button button-primary button-outline"
data-dismiss="modal"
>
Dismiss
</button>
<button type="button" class="button button-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
</div>