Getting Started
Layout
Components
Design
Modal
A modal is a type of user interface element that appears as an overlay on top of a web page, typically used to display additional content or require user input.
data-null-modal-target and ID for null-modal should be the same.
The modal component offers two helper functions:
#null_modal_open: This function allows users to activate the modal by its ID using JavaScript.
#null_modal_close: This function execute a callback function when the modal is closed.
- X-Large : without container
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<button data-null-modal-target="#a1" class="null-button null-button-primary">Modal</button>
<div class="null-modal-container null-padding-20" id="a1">
<div class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative">
<div class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ... </p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary"> Close </a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-modal-container-->
</div>- Large : with container
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<button data-null-modal-target="#a2" class="null-button null-button-primary">Modal</button>
<div class="null-modal-container null-padding-20" id="a2">
<div class="null-container">
<div class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative">
<div class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ...</p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary"> Close </a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-container-->
</div><!--End null-modal-container-->
</div>- Medium: .null-modal-medium
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<button data-null-modal-target="#a3" class="null-button null-button-primary">Modal</button>
<div class="null-modal-container null-padding-20" id="a3">
<div class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative null-modal-medium">
<div class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ... </p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary"> Close </a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-modal-container-->
</div>- Small: .null-modal-small
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<button data-null-modal-target="#a4" class="null-button null-button-primary">Modal</button>
<div class="null-modal-container null-padding-20" id="a4">
<div class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative null-modal-small">
<div class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ... </p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary"> Close </a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-modal-container-->
</div>- Center Modal
To center the modal, you can use the class ".null-modal-center" and add it to the element that has the class ".null-modal". This will ensure that the modal is centered on the screen:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<button data-null-modal-target="#a5" class="null-button null-button-primary">Modal</button>
<div class="null-modal-container null-padding-20" id="a5">
<div class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative null-modal-medium null-modal-center">
<div class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ... </p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary"> Close </a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-modal-container-->
</div>If you want to open the modal using JavaScript, make use of the null_modal_open helper function.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<div id="customButton"
class="null-border-radius null-box-shadow null-padding-10 null-margin-top-10 null-margin-bottom-10 null-display-inline-flex null-cursor-pointer">
Hi!
</div>
<div class="null-modal-container null-padding-20" id="a7">
<div
class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative null-modal-medium">
<div
class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button
class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ... </p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary">
Close
</a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-modal-container-->
</div>const customButton = document.getElementById("customButton");
if(customButton){
customButton.addEventListener("click",function(){
null_modal_open("#a7");
})
}If you want to execute a callback function when the modal is closed, make use of the null_modal_close helper function.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
<div>
<button data-null-modal-target="#a8" class="null-button null-button-primary">Modal</button>
<div class="null-modal-container null-padding-20" id="a8">
<div
class="null-modal null-padding-20 null-border-radius null-box-shadow null-background-white null-position-relative null-modal-medium null-modal-center">
<div
class="null-modal-header-container null-display-flex null-align-items-center null-justify-content-space-between null-font-size-20">
<div class="null-color-main null-font-weight-bold">
Null JS Modal
</div><!--End null-color-main-->
<button data-null-close-button
class="null-display-flex null-align-items-center null-justify-content-center">
<span class="null-color-white null-cursor-pointer">×</span>
</button>
</div><!--End null-modal-header-container-->
<div class="null-modal-body-container">
<p>Lorem ipsum ... </p>
</div><!--End null-modal-body-container-->
<div class="null-modal-footer-container">
<div class="null-text-align-end">
<a href="javascript:void(null) " data-null-close-button class="null-button null-button-secondary">
Close </a>
</div><!--End null-text-align-end-->
</div><!--End null-modal-footer-container-->
</div><!--End null-modal-->
</div><!--End null-modal-container-->
</div>null_modal_close("#a8", function(){
console.log("Bye Modal :/");
});- Scrolling
By default, the modal will have scrolling enabled when the content inside it exceeds the available space. This means that a scrollbar will appear within the modal, allowing the user to scroll and view the additional content.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, doloremque deserunt reprehenderit quis odit corporis fugit dolores consectetur provident consequuntur labore natus nemo iste, molestias facilis assumenda? Sed accusamus enim magni expedita ratione fugiat dignissimos similique, quae, esse odit eveniet fuga quod voluptatem neque doloribus facilis. Temporibus itaque cupiditate sed repellendus libero et reprehenderit, laudantium minima a, dolores deserunt eaque debitis eius voluptatum dignissimos. Maiores ullam at ab illo laboriosam porro, voluptate eos nemo provident animi quibusdam eius praesentium minus ipsa mollitia aut. Aliquid, omnis. Repellat eveniet recusandae suscipit, cumque enim veniam officia? Sequi nostrum assumenda ut quasi sed reiciendis.