Go one step further with our solutions for creating an intuitive, personalized experience.
The Modal is a highly stimulating component that makes the user aware of an action or consequence in the path.
The modal is composed of 2 parts: the content and the actions. Your modal will have the class h_modal and an attribute id. Indicate the name of the modal from this attribute.
<div class="h_modal" id="modal_1"></div>
The modal will appear when the method modal.open() is called.
<button type="button" id="btnModal_2">Modal</button>
<div class="h_modal" id="modal_2">Hello World</div>
<script>
var buttonModal2 = document.querySelector("#btnModal_2");
buttonModal2.onclick = function() {
modal.open('modal_2')
}
</script>
Once the modal is functional, add h_modal_header, h_modal_body and h_modal_footer to complete your component.
Hello World!
<button type="button" id="btnModal_3">Modal</button>
<div class="h_modal" id="modal_3">
<div class="h_modal_header">Header</div>
<div class="h_modal_body">
<p>Hello World!</p>
</div>
<div class="h_modal_footer">Footer</div>
</div>
<script>
var buttonModal3 = document.querySelector("#btnModal_3");
buttonModal3.onclick = function() {
modal.open('modal_3')
}
</script>
Use the h_modal_footer class to integrate the action buttons.
This area allows you to trigger various actions. To close a modal at any time, use the following method modal.close().
Hello World, modal + actions!
<button type="button" id="btnModal_4">Modal</button>
<div class="h_modal" id="modal_4">
<div class="h_modal_body">
<p>Hello World, modal + actions!</p>
</div>
<div class="h_modal_footer">
<button type="button" id="btnModalClose_4">Close</button>
<button>Action</button>
</div>
</div>
<script>
var buttonModal4 = document.querySelector("#btnModal_4");
buttonModal4.onclick = function() {
modal.open('modal_4')
}
var buttonModalClose4 = document.querySelector("#btnModalClose_4");
buttonModalClose4.onclick = function() {
modal.close('modal_4')
}
</script>
Haltura has several classes for resizing your modal. See the Sizing section.
Hello World!
<button type="button" id="btnModal_5">Modal</button>
<div class="h_modal width_50--t" id="modal_5">
<div class="h_modal_body">
<p>Hello World!</p>
</div>
<div class="h_modal_footer">
<button type="button" id="btnModalClose_5">Close</button>
<button>Action</button>
</div>
</div>
<script>
var buttonModal5 = document.querySelector("#btnModal_5");
buttonModal5.onclick = function() {
modal.open('modal_5')
}
var buttonModalClose5 = document.querySelector("#btnModalClose_5");
buttonModalClose5.onclick = function() {
modal.close('modal_5')
}
</script>
The modal.open() method takes a second parameter that prevents the modal from being closed from its overlay.
By default this parameter is true, set it to false to prevent closing from the overlay.
This modal can only be closed by clicking on this next button.
<button type="button" id="btnModal_6">Open Modal</button>
<div class="h_modal" id="modal_6">
<div class="h_modal_body">
<p>This modal can only be closed by clicking on this next button.</p>
</div>
<div class="h_modal_footer">
<button type="button" id="btnModalClose_6">Close</button>
</div>
</div>
<script>
var buttonModal6 = document.querySelector("#btnModal_6");
buttonModal6.onclick = function() {
modal.open('modal_6', false)
}
var buttonModalClose6 = document.querySelector("#btnModalClose_6");
buttonModalClose6.onclick = function() {
modal.close('modal_6')
}
</script>
The width of the modal is automatically adjusted according to the different Haltura breakpoints.
You can resize the modal with the modal--[B] class (e.g. modal--t, modal--m).
Hello small world!
<button type="button" id="btnModal_7">Open Modal</button>
<div class="h_modal modal--s" id="modal_7">
<div class="h_modal_body">
<p>Hello small world!</p>
</div>
<div class="h_modal_footer">
<button type="button" id="btnModalClose_7">Close</button>
</div>
</div>
<script>
var buttonModal7 = document.querySelector("#btnModal_7");
buttonModal7.onclick = function() {
modal.open('modal_7')
}
var buttonModalClose7 = document.querySelector("#btnModalClose_7");
buttonModalClose7.onclick = function() {
modal.close('modal_7')
}
</script>
Finally, the modal can cover the whole window with the class modal--full
Hello small world!
<button type="button" id="btnModal_8">Open Modal</button>
<div class="h_modal modal--full" id="modal_8">
<div class="h_modal_body">
<p>Hello small world!</p>
</div>
<div class="h_modal_footer">
<button type="button" id="btnModalClose_8">Close</button>
</div>
</div>
<script>
var buttonModal8 = document.querySelector("#btnModal_8");
buttonModal8.onclick = function() {
modal.open('modal_8')
}
var buttonModalClose8 = document.querySelector("#btnModalClose_8");
buttonModalClose8.onclick = function() {
modal.close('modal_8')
}
</script>
Hello World, modal + actions!
<button type="button" id="btnModal_9">Modal</button>
<div class="h_modal" id='modal_9'>
<div class="h_modal_body">
<p>Hello World, modal + actions!</p>
</div>
<div class="h_modal_footer">
<button type="button" id="btnModalClose_9">Close</button>
<button>Action</button>
</div>
</div>
<script>
var buttonModal9 = document.querySelector("#btnModal_9");
buttonModal9.onclick = function() {
modal.open('modal_9')
}
var buttonModalClose9 = document.querySelector("#btnModalClose_9");
buttonModalClose9.onclick = function() {
modal.close('modal_9')
}
</script>
| Class | Definition |
|---|---|
| h_modal | max-width: 1024px. |
| h_modal_header | Modal header. |
| h_modal_body | Modal body (auto scroll). |
| h_modal_footer | Modal footer. |
| modal--s | max-width: 320px. |
| modal--m | max-width: 425px. |
| modal--t | max-width: 768px. |
| modal--d | max-width: 1024px. |
| modal--l | max-width: 1440px. |
| modal--full | Full size. |
| Methods | Definition |
|---|---|
| modal.open(idModal, canClose = true) | Open a modal. |
| modal.close(idModal) | Close a modal. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings