Django Basics [-3]

Distal modal dialog:

 

 

 

 

Source can copy and paste:

        .hide{
            display: none;
        }
        { # Shade the full screen mask layer are covered, fixed is fixed, opacity transparency} # 
        .shade {
            position: fixed;
            top: 0;bottom: 0;left: 0;right: 0;
            background: black;
            opacity: 0.6;
            z-index: 100;


        }
        { # The Add-Modal pop-up, fixed is fixed, z-index is positioned on the inside who} # 
        .add- Modal {
            position: fixed;
            height: 300px;
            width: 400px;
            top: 200px;
            left: 50%;
            z-index: 101;
            border: 1px solid red;
            background: white;
            margin-left: -200px;
        }

 

</ div> 
{ # mask layer} # 
<div class = " Shade hide " > </ div> 
{ # pop-added layer} # 
<div class = " the Add-Modal hide " > </ div>