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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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 Use Aggregate Functions (MIN, MAX, SUM, AVG, COUNT) to Summarize Data in SQL?SQL/MySQLHere’s what we can do with PHP date() functionPHPHow does while loop work in SCSS?SCSSHow to get query string values in JavaScript? (URL Manipulation using URLSearchParams)JavaScriptKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscellaneousURL paths in DrupalDrupalHow to add a Line Chart in Angular App?AngularHow to make a Custom Login Page in WordPress?WordPressCROSS JOIN in PostgresPostgresHow to create a Progress Bar using JavaScript?JavaScriptFile System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousHow to switch dark and light themes using pure CSS?CSS