Yogesh Chauhan's Blog

How to display modal from bottom to top using CSS and JavaScript?

in CSS & JavaScript on October 18, 2020

For modals, we USUALLY use something like this:


//CSS Code

#modal {
    width: 100%;
    height: 0%;
}

and then with JavaScript, we just make the height to 100% when we display the modal.

Now there are few ways to display the modal from bottom. We can use margin-top directly or we can use animation to do the same with animation effect. I am going to discuss the first method.

Solution: Using margin-top


//CSS Code

#modal {
    width: 100%;
    height: 0%;
    margin-top:100%;
}

After that using JavaScript, remove the margin-top by setting it's value to zero along with changing the height to 100%.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to add new elements with swing animation using JavaScript and CSS?CSS@forward rule in SCSS (Sass)SCSSThe ALPHA function in Envision BasicEnvision BasicHow to apply style to a specific child element using CSS?CSSHow to host Google fonts on your server and add them using CSS?CSSCreate a menu with a curtain falling animation using CSS and JavaScriptCSSHow to calculate elapsed time in JavaScript?JavaScriptGeneral concepts in DrupalDrupalWHERE Clause in PostgresPostgresHow to create a flip pricing table using CSS and JavaScript?CSSEverything you need to know about ANY, SOME and ALL Operators in PostgresPostgresHow to create bouncing balls using HTML canvas and JavaScript?HTML