YogeshChauhan.com
How to display modal from bottom to top using CSS and JavaScript?
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%.

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 5 How to create flickering text using CSS? Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress?

You might also like these

How to Draw a Text Image using JavaScript?JavaScriptLearn to create your skill bar using CSSCSSHow to add navigation menu in Angular 9 app?AngularObservation of Human Behavior [Shopping Observation Example]MiscAll possible ways you can Insert Data in PostgresPostgresWhat is iFrame in HTML? Why do we need it?HTMLHow to change value of a span tag using a reference from another div using jQuery?jQueryWhat’s a repository on Github?MiscSteps to Secure a VPNMiscHow to change CSS with jQuery?CSSHow to create a smooth scrolling effect with CSS?CSSThe Drupal flowDrupal