Heads up: Version 1.1 is out and brings new Methods to open and Close the Modal programmatically.
More info, see here
Example
Here you can see a full working example of the Modal with basic-settings.
I’m a Popup!
Video Walkthrough
Step-by-step guide
Minimal Layout
For the very basic-setup you should have at least the marked Layout. However, I recommend you to also include some kind of trigger (button, icon, anything else), except you only want that modal to be opened by a certain scroll Distance or after a certain time!
For the Modal itself (marked red) the only thing you have to keep in mind is that you need to assign a specific ID to the outer wrapper of the modal!
Optional: Add A Trigger and Close-Button
Close Trigger:
By default the modal will close when you
- click on the backdrop
- hit ‘ESC’-Key
You May want to add an icon to close the modal too. To do so you just need to add any Element available in Bricks and assign it a class of wcd_closeModal
Open Trigger:
You can also add one or more triggers for opening that modal. To do so you just need to add any Bricks-Element and assign it a class of wcd_openModal
Note: These two classes (wcd_closeModal and wcd_openModal) are the default classes. You can change those classes which I will show you later how. Keep in Mind that you have to change the classes on the trigger-elements too if you want to do that!
Enqueue & Initialize the Modal
That’s it. You now just need to enqueue & initialize the Modal. Copy & Paste the following code anywhere on your page. The Code will automatically be placed in the footer (make sure that you have my child-theme activated).
<?php
wp_enqueue_script('wcd_modal');
add_action('wp_footer', function() {
?>
<script>
const modalOne = new WCD_modal({
modal : '#myModal',
// trigger : '.open-modal',
// close : '.close-modal',
//timeout : 1,
//scroll : 500,
});
</script>
<?php
}, 99 );
?>Options & Parameter to adapt
| Option Name | Type | Default Value | Note |
|---|---|---|---|
| modal | String | - | Target the ID of the Wrapper-Element of the Modal. Make sure to include the hash (#) sign! |
| trigger | String | .wcd_openModal | Trigger to open the Modal on click. Can be set to any class, make sure to include the dot (.)! |
| close | String | .wcd_closeModal | Trigger to close the Modal on click. Can be set to any class, make sure to include the dot (.)! |
| timeout | Integer | - | If set, the Modal will open after specified time after page load. Time in ms! If you want the modal to open instantly on page load set this value to 1(!), as 0 doesn't work on timeout functions! |
| scroll | Integer | - | If set, the Modal will open after the specified distance (in px) is scrolled. |
Programmatically open and Close Modal
Since Version 1.1 you are now able to open & close the modal programmatically! That opens a lot of possibilites for example to load data asynchronous (using ajax or WP Rest API) and open the modal after the data has succesfully loaded! Or if you have any javascript code running before the modal should open, you can now include the modal into your existing code and open or close it with the custom methods like so:
// First we need to initialize our Modal, as we did before:
<?php
wp_enqueue_script('wcd_modal');
add_action('wp_footer', function() {
?>
<script>
const exampleModal = new WCD_modal({
modal : '#myModal',
});
</script>
<?php
}, 99 );
?>After initialization we have now access to two methods called openModal() and closeModal()
<script>
//open the modal anywhere in your javascript code!
exampleModal.openModal();
//close the modal anywhere in your javascript code!
exampleModal.closeModal();
</script>Full Source Code
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/modal/wcd_modal.js