Options Admin - Responsive Web Application Kit

Default Bootstrap Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#myModal">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="myModalLabel">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Draggable Modals

You can drag modal by grabbing modal header. This has to be initialized in javascript by using jQuery ui draggable function.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal2">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade draggable" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header draggable-handle">                <h4 class="modal-title" id="modal2Label">Draggable Modal <small>Grab it here</small> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div><!-- Script for initializing draggable --><script type="text/javascript">    $(function($) {        $( ".draggable" ).draggable({ handle: ".draggable-handle" });    });</script>

Modal Without backdrop

You can disable backdrop by adding data-backdrop="false"to the modal. By disabling backdrop, modal can not be closed by clicking anywhere else.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal3" data-backdrop="false">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal3" tabindex="-1" role="dialog" aria-labelledby="modal3Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal3Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Custom Backdrop

You can customize backdrop color by simply adding data-backdrop-colorattribute to .modal. You can use primary, white, danger, black, success etc colors.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal4" >    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="modal4Label" data-backdrop-color="gray">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal4Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                <p>You can edit color of backdrop by simply adding <code class="language-html">data-backdrop-color</code> attribute to <code class="language-html">.modal</code>. </p>                <p>You can use primary, white, danger, black, success etc colors. You can also add your own color if you want.</p>            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Colored Modals

Just add bg-primaryfor primary colored modal. You can use other color classes like bg-black, bg-success, bg-warning etc.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal5">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal5" tabindex="-1" role="dialog">    <div class="modal-dialog" role="document">        <div class="modal-content bg-warning">            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer no-border">                <div class="btn-group" role="group">                    <button type="button" class="btn bg-white btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-black btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-check"></i>Accept</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Transparent Modal

You can customize backdrop color by simply adding data-backdrop-colorattribute to .modal. You can use primary, white, danger, black, success etc colors.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal6" >    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal vert-center fade trans-modal" id="modal6" tabindex="-1" role="dialog" aria-labelledby="modal6Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal6Label"><i class="fa fa-bars"></i> Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer text-center">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-check"></i>Accept</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Top Aligned

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal7">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal vert-top fade" id="modal7" tabindex="-1" role="dialog" aria-labelledby="modal7Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal7Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Bottom Aligned

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal8">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal vert-bottom fade" id="modal8" tabindex="-1" role="dialog" aria-labelledby="modal8Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal8Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Full Screen Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal9">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade modal-full-screen" id="modal9" tabindex="-1" role="dialog" aria-labelledby="modal9Label">    <div class="modal-dialog" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal9Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Small Modal

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

<!-- Launch Button --><button type="button" class="btn btn-primary btn-animated btn-wide" data-toggle="modal" data-target="#modal10">    <span class="visible-content">Launch Modal</span>    <span class="hidden-content"><i class="fa fa-arrow-right"></i></span></button><!-- Modal --><div class="modal fade" id="modal10" tabindex="-1" role="dialog" aria-labelledby="modal10Label">    <div class="modal-dialog modal-sm" role="document">        <div class="modal-content">            <div class="modal-header">                <h4 class="modal-title" id="modal10Label">Modal title <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></h4>            </div>            <div class="modal-body">                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.            </div>            <div class="modal-footer">                <div class="btn-group" role="group">                    <button type="button" class="btn btn-gray btn-wide btn-rounded" data-dismiss="modal"><i class="fa fa-times"></i>Close</button>                    <button type="button" class="btn bg-success btn-wide btn-rounded"><i class="fa fa-check"></i>Save</button>                </div>                <!-- /.btn-group -->            </div>        </div>    </div></div>

Custom Modals

We have added extra plugins for customized modals.

Custom Alert Modal with animation

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Modal Head

An animated way to display a modal.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Custom Modal with animated title

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Sweet Alert

A beautiful replacement for JavaScript alert.

Success Message with animation

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

Warning Modal with confirm & cancel buttons

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

John Doe

Modals

Default Bootstrap Modal

Draggable Modals

Modal Without backdrop

Custom Backdrop

Colored Modals

Transparent Modal

Top Aligned

Bottom Aligned

Full Screen Modal

Small Modal

Custom Modals

Custom Alert Modal with animation

Modal Head

Custom Modal with animated title

Sweet Alert

Success Message with animation

Warning Modal with confirm & cancel buttons

Useful Sidebar

John Doe

John Doe

Modals

Default Bootstrap Modal

Draggable Modals

Modal Without backdrop

Custom Backdrop

Colored Modals

Transparent Modal

Top Aligned

Bottom Aligned

Full Screen Modal

Small Modal

Custom Modals

Custom Alert Modal with animation

Modal Head

Custom Modal with animated title

Your message has been sent successfully.

There was some problem in your input. Try again.

Sweet Alert

Success Message with animation

Warning Modal with confirm & cancel buttons

Useful Sidebar