HTML, CSS, and JS Primitives write a modal popup, which, by the way, resolves the parent element translucent sub-element opacity effect

Modal Frame:

HTML section:

<!--Button -    <ButtonID= "box"onclick= "Pop_box ()">Pop-up box</Button>    <!--pop-up modal box -    <Divclass= "Div-container"ID= "Div-container"style= "Display:none;">        <Divclass= "Div-child-container">            <Divclass= "Div-child">                <span>Hhhhh</span>                <Divclass= "My-btn">                    <ButtonID= "Canclebtn"onclick= "cancle ()">Cancel</Button>                    <ButtonID= "Confrim"onclick= "Confrim ()">Confirm</Button>                </Div>            </Div>        </Div>    </Div>

CSS section:

<style type= "Text/css" > #box{width:80px;Height:40px;background:#fd7430;Border:None;Border-radius:5px;Outline:None;Color:#fff; }. Div-container{position:fixed;Top:0%;width:100%;Height:100%;Z-index: $;background:Rgba (0,0,0,0.5)!important;/*compatible with IE several do not know, like IE5*/background:#000;Filter:Alpha (opacity=60); }/*the parent element of the set Div-child is primarily to inherit the transparency attribute of the parent element of this element, so the div-child is not translucent, but opaque, resolving the bug that the parent element is transparent and the child element is transparent.*/. Div-child-container{position:relative;width:400px;Height:200px;margin:Auto;Top:30%;background:#fff;Z-index: -;/*Z-index to be placed above the parent element*/}. Div-child{width:400px;Height:200px;margin:Auto;background:#fff;Z-index: -;/*Z-index to be placed above the parent element*/text-align:Center; }. Div-child span{position:relative;Top:40px; }. Div-child. my-btn{Margin-top:80px; }. Div-child. my-btn button{width:80px;Height:40px;background:#fd7430;Border:None;Border-radius:5px;Color:#fff;Outline:None; }. Div-child. My-btn button:first-child (){Margin-right:20px; }</style>

Javascript:

<script type= "Text/javascript" >/*button pop-up modal box*/        functionPop_box () {varcontainer = document.getElementById (' Div-container ')); Container.style.display= "Block"; }        /*Cancel Event*/        functioncancle () {varcontainer = document.getElementById (' Div-container ')); Container.style.display= "None"; }        /*confirm the event, because there is no confirmation event now, the popup box is hidden*/        functionConfrim () {varcontainer = document.getElementById (' Div-container ')); Container.style.display= "None"; }    </script>

HTML, CSS, and JS Primitives write a modal popup, which, by the way, resolves the parent element translucent sub-element opacity effect