Hai,
I'm having difficulties closing the modal with javascript, can you help me please, so basically instead of pressing the X button i want to close it in the javascript code.
And also is it possible when the page is loaded, i want it to go to a certain section (automatically scrolling down) ?
Many thanks
Cordially,
Kent
Hello,
Can you please let us know which Modal you are using so that we can provide you with further assistance.
Consider using the following code at the bottom of the Page:
<script>
jQuery(document).ready( function(){
setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
}
}, 1);
});
jQuery(window).on('load', function(){
var divScrollToAnchor = window.location.hash;
if( typeof divScrollToAnchor !== 'undefined' ) {
var t = setTimeout( function(){
jQuery('html,body').stop(true).animate({
'scrollTop': jQuery( divScrollToAnchor ).offset().top - 100
}, 700, 'easeOutQuad');
}, 1000);
}
});
</script>Then simply use https://your-website.com/page.html#section-id to Scroll to that Section.
This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hai,
Thank you for the response,
for the modal i used this kind of modal:
<div class="modal fade delete-modal" tabindex="-1" role="dialog" aria-labelledby="centerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Remove Entries</h4>
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div id="content1-modal"></div>
</div>
</div>
</div>
</div>
</div>
</div>How to close and open this modal from the javascript ?
Thank you in advacne
Hello,
You can try using something like this:
<script type="text/javascript">
window.onload = function () {
document.getElementById("btn-close").addEventListener("click", function () {
const container = document.getElementById("test-modal");
const modal = new bootstrap.Modal(container);
modal.hide();
});
};
</script>You will need to add a <button> with id="btn-close" Attribute and also add the id="test-modal" Attribute to the Modal. For further customizations, you can visit: https://getbootstrap.com/docs/5.1/components/modal/#via-javascript .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello,
Thank you for the previous answer, i have another question
with this type of modal
<div class="modal fade delete-modal" tabindex="-1" role="dialog" aria-labelledby="centerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Remove Entries</h4>
<button type="button" class="btn-close btn-sm" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div id="content1-modal"></div>
</div>
</div>
</div>
</div>
</div>
</div>how can i make it appear automatically once my page are loaded ?
Thank you
Hello,
This Feature is currently not available out of the box for this Modal Type and you will need to use Custom Codes to make the Modal open automatically inside the window.onload function using the Modal Documentations: https://getbootstrap.com/docs/5.1/components/modal/#via-javascript .
We currently have this functionality available on another Modal: https://themes.semicolonweb.com/html/canvas/modal-onload.html .
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard