Hey @thisisbbc,
Try triggering a click to other elements like x-modal-content-outer. Please also note that the replaceState function used in the code by Nabeel affects the history. If your website user opens and closes the modal 5 times, the user needs to click the back button 5 times if s/he wants to go back to past pages.
If that doesn’t help or if you don’t want the behavior I described, please consider the following method of opening a modal, canvas or any element with Toggle Hash option. This is also the correct method.
I believe you’re opening the modal or off canvas using the Toggle Hash feature. It’s not the intention of the feature to open a modal on the same page. It was meant for links outside of the page to open a modal on the other page.
My solution does not involve the hash so we don’t have to worry about sending a click to a lot of areas and this is the correct way to open a modal, off canvas or just about anything that needs clicking. You just need to plug in the correct selectors. I believe this is also easier to read and manage. Check the setup below.
1. The Link Setup <a href="#" class="open-xyz-link">Open XYZ Modal</a>. What’s important in the link setup is the class. In this example, the class is open-xyz-modal. Take note of this as it will be used in the following JS code.
2. The Modal or “any element with Toggle Hash” Setup. Name the hash uniquely to prevent conflict. I use xyz-modal in my example so in the future, I’ll remember what link opens what toggle.
3. The JS Code. This could be added as Global JS or per page (Content JS)
(function($) {
/* .open-xyz-link opens xyz-modal */
$('.open-xyz-link').on('click touchend', function(e) {
e.preventDefault();
$('[data-x-toggle-hash="xyz-modal"]').click();
}); /* .open-test-modal set */
})(jQuery);
I believe you already see the JS connection with the link and the modal. If not, check out the selectors in the code.
.open-xyz-link[data-x-toggle-hash="xyz-modal"]
If you also noticed in the code, there’s is a beginning and end comment which indicates the beginning and end of the code set or block. You can duplicate the set for more links and toggles like the following:
(function($) {
/* .open-xyz-link opens xyz-modal */
$('.open-xyz-link').on('click touchend', function(e) {
e.preventDefault();
$('[data-x-toggle-hash="xyz-modal"]').click();
}); /* .open-test-modal set */
/* .open-abc-canvas link opens abc-canvas */
$('.open-abc-link').on('click touchend', function(e) {
e.preventDefault();
$('[data-x-toggle-hash="abc-canvas"]').click();
}); /* .open-abc-canvas set */
})(jQuery);
Please just note that all of the custom codes you see here in the forum are just guides. Issues that will arise from the use of the code and further enhancing them is outside the scope of our support.
Hope that helps.
