YogeshChauhan . com

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%.

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to get Current Hour, Minute and Second in JavaScript?JavaScriptHow to create a secure random number using JavaScript?JavaScriptIN Operator in PostgreSQLPostgresWhat Is a Graph Database?Misc3 ways to pass a variable in url() function in SCSS (Sass)SCSSObject destructuring in JavaScript: Unpacking fields from objects passed as function parameterJavaScriptWHERE Clause in PostgresPostgresWordPress: How to find all posts with a specific custom field value?WordPressFive common features of Angular template syntax (with examples)AngularINTERSECT and EXCEPT in PostgresPostgresCan Firewall and IDPS Stop DDoS Attack?MiscHow to Pop an Alert Box in PHP?JavaScript