Bootstrap - Modals

We have styled all Bootstrap elements just as you want!

Toggle Code!
Talk to usSettings

Basic Modal

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

<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">    Launch demo modal</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">                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                <button type="button" class="btn btn-primary">Save changes</button>            </div>        </div>    </div></div>

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name type default description
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify staticfor a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed
show boolean true Shows the modal when initialized.
remote path false

This option is deprecated since v3.3.0 and has been removed in v4.We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

If a remote URL is provided, content will be loaded one timevia jQuery's loadmethod and injected into the .modal-contentdiv. If you're using the data-api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

Copy 
<adata-toggle="modal"href="remote.html"data-target="#modal">Click me</a>

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

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.