Modal

Create modal dialogs with different styles and transitions.

Usage

The modal component consists of an overlay, a dialog and a close button.

Class Description
.f-modal Add this class to a <div> element to create the dialog container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling.
.f-modal-dialog Add this class to a child <div> element to create the dialog box.
.f-modal-close Add this class to an <a> or <button> element to create a close button within the dialog box. We recommend adding the .f-close class from the Close component to give the button a proper styling, though you can also use text or an image.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-f-modal attribute. If you are using another element, like a button, just add the data-f-modal="{target:'#ID'}" attribute to target the modal's id.

Example

Open

Headline

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.

Markup

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-f-modal>Open</a>

<!-- This is a button toggling the modal -->
<button class="f-btn" data-f-modal="{target:'#my-id'}">Open</button>

<!-- This is the modal -->
<div id="my-id" class="f-modal">
	<div class="f-modal-dialog">
		<button class="f-modal-close f-close"><i class="material-icons">&#xE5CD</i></button>
		...
	</div>
</div>

JavaScript options

By default, the modal closes automatically when clicking on the modal overlay. To prevent this from happening, just add the data-f-modal="{target:'#ID',bgclose:false}" attribute.

You can trigger a new modal inside the current modal. The default behaviour closes the first modal when a second one opens. You can prevent this from happening by adding the data-f-modal="{target:'#ID',modal:false}" attribute.


You can create a header and footer for your modal, which are seperated from the content. Just add the .f-modal-header or the .f-modal-footer class to a <div> element inside the modal dialog.

Example

Headline

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. 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.

Markup

<div class="f-modal">
	<div class="f-modal-dialog">
		<div class="f-modal-header">...</div>
		...
		<div class="f-modal-footer">...</div>
	</div>
</div>

You can also create a caption that will be placed outside the modal. Just add the .f-modal-caption class to a <div> element inside the modal dialog.

Example

Headline

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.

Caption

Markup

<div class="f-modal">
	<div class="f-modal-dialog">
		<div class="f-modal-caption">...</div>
	</div>
</div>

To add a fancy opening effect where the modal opens from the element clicked just add the expand: true option to the element triggering the modal.

Example

Markup

<button class="f-btn" data-f-modal="{target:'#my-id',expand:true}">Open</button>
<div class="f-modal">
	<div id="my-id" class="f-modal-dialog">
		<div class="f-modal-caption">...</div>
	</div>
</div>

To create a lightbox-like modal dialog, just add the .f-modal-dialog-lightbox class. This can be useful, if you want to use the modal as a lightbox for your images. The close button will adjust its position automatically to the dialog.

Example

Markup

<!-- This is the anchor toggling the modal -->
<a href="#my-id" data-f-modal>...</a>

<!-- This is the modal -->
<div id="my-id" class="f-modal">
	<div class="f-modal-dialog f-modal-dialog-lightbox">
		<button class="f-modal-close f-close f-close-alt"><i class="material-icons">&#xE5CD</i></button>
		<img src="" alt="">
	</div>
</div>

NOTE When creating a close button within the lightbox modifier, we also recommend adding the .f-close-alt class from the Close component to the close button to give your button a styling that fits the lightbox modal.


Modal blank

To reset all styling, like padding and margin, add the .f-modal-dialog-blank class. This can be useful, if you want to create a fullscreen modal. In that case you also need to add the .f-height-viewport class from the Utility component so that the modal extends to full viewport height.

Example

Open
<!-- This is the anchor toggling the modal -->
<a href="#my-id" data-f-modal>...</a>

<!-- This is the modal -->
<div id="my-id" class="f-modal">
	<div class="f-modal-dialog f-modal-dialog-blank">...</div>
</div>

To place a spinning icon inside your modal, add the .f-modal-spinner class to a <div> element inside the modal dialog.

Example

Open

Markup

<div class="f-modal">
	<div class="f-modal-dialog">
		<div class="f-modal-spinner">...</div>
	</div>
</div>

Center Modal

To vertically center the modal, add the {center:true} option to the data-attribute.

Example

Open

Markup

<a href="#my-id" data-f-modal="{center:true}"></a>

Large dialog modifier

To apply the site's container width to the modal dialog, just add the .f-modal-dialog-large class.

Example

Open

Markup

<div class="f-modal-dialog f-modal-dialog-large">...</div>

Overflow container in modal

You can also display the modal's content in a scrollable container. Just add the .f-overflow-container class to a <div> element inside the modal dialog. The modal will automatically expand and fill the site's height.

Example

Open

Markup

<div class="f-modal-dialog">
	<p>...</p>
	<div class="f-overflow-container">...</div>
	<p>...</p>
</div>

Ajax Content

To fetch content via ajax to show in a modal dialog the component uses jQuery's .load() method. Pass a selector in the options to have the contents of the selector from the remote URL appear in the modal.

The modal will automatically show a loading icon first and then the ajax content will be loaded in a wider modal (view the source of the requested page to see the full contents and what is actually loaded into the modal).

Example

Open

Markup

<a href="/path/to/url" data-f-modal="{selector:'#content-container'}"></a>

Dialogs

The modal component also provides alternatives to the native dialogs: window.alert, window.confirm and window.prompt.

Example

FatKit.modal.alert("Attention!");
FatKit.modal.confirm("Are you sure?", function(){
	// will be executed on confirm.
}, options);
FatKit.modal.prompt("Name:", value, function(newvalue){
	// will be executed on submit.
}, options);
FatKit.modal.yesNo("Message", function(blnYes){
	// Yes clicked. blnYes will be true for yes, and false for no
}, options);
let modal = FatKit.modal.blockUI("Any content..."); // modal.hide() to unblock

Message Dialogs

FatKit.modal.danger("Oh no, something went wrong!");
FatKit.modal.warning("Hmmm... that shouldn't be happening!");
FatKit.modal.success("Yes, that worked!");

JavaScript

You can handle modal dialogs via raw javascript.

Example

let modal = FatKit.modal(".modalSelector");

if ( modal.isActive() ) {
	modal.hide();
} else {
	modal.show();
}

Events

The modal component triggers an show.f.modal event every time a modal is opened and hide.f.modal when a modal is closed.

Example

FatKit.$('.modalSelector').on({

	'show.f.modal': function(){
		console.log("Modal is visible.");
	},

	'hide.f.modal': function(){
		console.log("Element is not visible.");
	}
});

Events

Name Parameter Description
show.f.modal event On modal show
hide.f.modal event On modal hide

JavaScript options

Option Possible value Default Description
keyboard boolean true Allows controls from keyboard (ESC to close)
bgclose boolean true Allow modal to close automatically when clicking on the modal overlay
minScrollHeight integer 150 Set the height for overflow container to start scrolling
center boolean false Vertically center the modal
modal boolean true Close currently opened modals on opening modal