Closing Modal with javascript

5 replies · opened Sep 8, 2021

KkentrachmatSep 8, 2021

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

SSemicolon WebSTAFFSep 8, 2021

Hello,

  1. Can you please let us know which Modal you are using so that we can provide you with further assistance.

  2. Consider using the following code at the bottom of the Page:
    [ch_pre]
    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);
    }

    });
    [/ch_pre]

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.

KkentrachmatSep 9, 2021

Hai,

Thank you for the response,

for the modal i used this kind of modal:


    
        
            
                Remove Entries
                
            
            
                
                    
                        
                    
                
            
        
    

How to close and open this modal from the javascript ?

Thank you in advacne

SSemicolon WebSTAFFSep 10, 2021

Hello,

You can try using something like this:
[ch_pre]
window.onload = function () {
document.getElementById("btn-close").addEventListener("click", function () {
const container = document.getElementById("test-modal");
const modal = new bootstrap.Modal(container);
modal.hide();
});
};
[/ch_pre]

You will need to add a `` 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.

KkentrachmatSep 15, 2021

Hello,

Thank you for the previous answer, i have another question

with this type of modal


    
        
            
                Remove Entries
                
            
            
                
                    
                        
                    
                
            
        
    

how can i make it appear automatically once my page are loaded ?

Thank you

SSemicolon WebSTAFFSep 16, 2021

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