Home > Developer > Web Develop
Simple implementation functions as above: 1, click the button, modal box pops up.
2. Click the Red Cross to close the check box.
Idea: First write the property with no hidden properties, and then create a new label and attributes via JS.
The specific code is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css"> *{padding:0;margin:0; }Html,body{Height:100%; }#box{width:100%;Height:100%;background:Rgba (0,0,0,.3); }#content{position:relative;Top:150px;width:400px;Height:200px;Line-height:200px;text-align:Center;Color:Red;Background-color:#fff;margin:Auto; }#span1{position:Absolute;Background-color:Red;Top:0; Right:0;width:30px;Height:30px;Line-height:30px;text-align:Center;Color:#fff;cursor:Pointer; } </style></Head><Body><ButtonID= "BTN">Pop</Button></Body><Scripttype= "Text/javascript"> //get DOM element 1. Get Event Source varobtn=document.getElementById ('btn'); //Create a popup modal box related DOM object varOdiv=Document.createelement ('Div'); varOP=Document.createelement ('P'); varOspan=Document.createelement ('span'); //Setting Propertiesodiv.id= 'Box'; Op.id= 'content'op.innerhtml= 'modal Box successfully ejected'ospan.innerhtml= 'X'; Ospan.id= 'Span1' //Append ElementOdiv.appendchild (OP); Op.appendchild (Ospan); //Click on the popup button to eject the modal boxObtn.onclick= function(){ //dynamically add a div to the body This. Parentnode.insertbefore (ODIV,BTN)}//Click the x to close the modal boxOspan.onclick= function(){ //Remove Odiv elementoDiv.parentNode.removeChild (odiv)}</Script></HTML>View Code
JS Instance 2 to achieve modal box popup;
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
