Scribd
Upload
144 views

How To Create Simple Popup Modal in Django Using CSS, Js in 5 Minutes - by Bilge Demirkaya - Medium

This document provides instructions for creating a modal popup in a Django project. It describes creating a semi-transparent black background div and styling it with CSS. It also covers styling the modal content div, adding a close button, and using JavaScript to open and close the modal when buttons are clicked. The JavaScript listens for DOM content to load, then adds click event listeners to the open and close buttons to display or hide the modal div. This provides an easy way to add additional interactive content like forms in a modal overlay.

Uploaded by

Mario Colosso V.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
144 views

How To Create Simple Popup Modal in Django Using CSS, Js in 5 Minutes - by Bilge Demirkaya - Medium

This document provides instructions for creating a modal popup in a Django project. It describes creating a semi-transparent black background div and styling it with CSS. It also covers styling the modal content div, adding a close button, and using JavaScript to open and close the modal when buttons are clicked. The JavaScript listens for DOM content to load, then adds click event listeners to the open and close buttons to display or hide the modal div. This provides an easy way to add additional interactive content like forms in a modal overlay.

Uploaded by

Mario Colosso V.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

!"#$%&'%(")*+,+ ?

@1)5;(

!"#$%&&%'()* · +,%-. $%&&%'

-./&0.&1)%+0%&2"(3#%&3.343
(.5+#&"6&'7+6$.&42"6$&899:
;9&"6&<&("640%2
/0&1(#2(30)4565 +-1#78 · 9#30:#)(5;

<=%.%#,6#+:;)('#>((&#%:#?:*@&5*=
Let’s create a popup modal in a Django project so that you can
store your additional info, forms, etc. Here’s my example, I have
recently created a Twitter-like website. (actually looks the same!)

The Frst thing we want to do is create a semi-transparent black


background. To do that we will go to our Html page(to modal
section), create a div.

!"#$%&$%'(

<div class=”bg-modal”>
<div class=”modal-content”>

</div>
</div>

Let’s style this modal now:


.bg-modal{
width:100%;
height:100%;
background-color: black;
opacity: 0.7;
}

we also need to tell our background modal to lay over top


of the content.

position: absolute;

when you say absolute, you need to say where it is.

top:0px;

The problem here is if we do opacity: 0.7, it will transfer the child


element and it won’t matter if you specify the child element
opacity later. The solution is not to specify opacity in here but in
background color.

bacground-color:rgba(0,0,0, (the 4th number will be the


opacity)

Let’s look at what we have so far


.bg-modal{
width: 100%;
height:100%;
background-color: rgba(0,0,0,0.5); /* make it half
transparent */
position: absolute;
top:0px;
z-index: 1;
display: none; /* It will remain invisible until you open
*/
justify-content: center; /*center horizontally*/
align-items: center ; /* center vertically */}

Don’t forget to style your content section.Here is mine.

.modal-content{
width:600px;
height:300px;
background-color: white;
border:none;
border-radius: 15px;
padding:15px;
position: relative;
}

When your parent element’s position is absolute ( That


means you choose exact location for your div) you must
set your child element position relative. So it will position
your child div inside of it.

And Let’s make a button that you can close your modal.

<div class=”close”> + </div>


I use + and rotate it in css code, -instead of using x- which will
give it a better look. Let’s do the code.

.close{
position: absolute;
top:5px;
right: 14px;
font-size:25px;
transform: rotate(45deg); /* will make it look like x */
cursor: pointer;
}

you can Fll your HTML content now with whatever you want
inside of it.

)'*+,-&)%'(
Let’s add a little bit Javascript to make it actually work. Right now
our modal is hidden. All we want to do is click a button and open
it.

document.addEventListener(‘DOMContentLoaded’, function() {

document.getElementById(‘myBtn’).addEventListener(‘click’,
() => {

document.querySelector(‘.bg-modal’).style.display =’flex’;

});

document.querySelector(“.close”).addEventListener(‘click’,
() => {

document.querySelector(‘.bg-modal’).style.display =’none’;
});
BIJKKL>#/M

."/0'&1'2"#3454
});
E%N.'5)(#L:10:(()#5.
O7#E0&0F%:#P5&&(6
=..@*QRR10.=-,SF%3R,
All we say is;
0&1(;(30)4565

$%&&%'

— when Dom content (body of the page) is loaded, run a function


->
!7

If
!
the user clicks on myBtn element run a function ->

go get my modal element and display it.

if user click on close element run a function ->

go get my modal element and make it hidden again.

It’s a simple and sweet code which will help you to moderate and style
your website a lot. Hope this helps!

<%@-@* 2A5:1% B(,*0.(#2(*01: B(,*0.(#2(C(&%@3(:. D5C5EF)0@.

+,%-. G(&@ H(15&

You might also like