Homer - Responsive Admin Theme

Special Admin Theme for small and medium webapp with very clean and aesthetic style and feel.

  1. Dashboard
  2. Interface
  3. Modals

Modals

Modal window examples
Homer modal windows

Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Modal contains title, content and footer 


<button type="button" class="btn btn-success"
        data-toggle="modal" data-target="#myModal">
        Launch demo modal
</button>
Optional size and colors

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog

You can add extra class to color your modal window avalible class (hmodal-info, hmodal-warning, hmodal-success, hmodal-danger) 

var modalInstance = $modal.open({
       templateUrl: 'views/modal/modal_example2.html',
       controller: ModalInstanceCtrl,
       windowClass: "hmodal-success"
});
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 static for 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 will be 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 time via jQuery's load method and injected into the .modal-content div. 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
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>