Frame CSS, JS

Not my original, this is my mentor code, in this collation analysis.

1, masking layer, when the popup, the page becomes gray.

CSS Section

. Overlay{display:none;position:fixed;left:0;top:0;z-index:1000;width:100%;height:100%;background-color:hsla (0, 0%, 0%,. 7);}

2, the timing prompt small bullet box, the page vertical center display

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/70/17/wKioL1Wxqxux0HXRAAAeZP40pjc988.jpg "title=" Qq20150724105350.png "alt=" Wkiol1wxqxux0hxraaaezp40pjc988.jpg "/>

CSS Section

/*toast Tips */

. Toast{position:fixed;top:50%;left:50%;z-index:1100;display:none;width:13em;padding:.8em 1em;background-color: Hsla (0, 0%, 0%,. 7);
Text-align:center;color: #fff; font-size:14px;line-height:1.3;border-radius:.5em;
box-shadow:0 0 4px 2px hsla (0, 0%, 0%,. 3);
-webkit-transform:translate (-50%,-50%);
-moz-transform:translate (-50%,-50%);
-ms-transform:translate (-50%,-50%);
-o-transform:translate (-50%,-50%);
Transform:translate (-50%,-50%);
}

JS section

/**
* Toast prompt, used to prompt user information, automatically close after 4 seconds, click on the page to close
* Call: Toast (String)
*/
Toast: (function () {
var d = document,
Ele = d.getElementById ("Toast"),
isVisible = 0,//Still wondering why to set up here
Identity

if (ele = = = null) {
Ele = d.createelement ("div");
Ele.id = "Toast";
Ele.classname = "Toast";
Ele.style.display = "None";
D.body.appendchild (ele);
}//Create Div

var hidefn = function () {
if (isVisible) {
Cleartimeout (identity);
Ele.style.display = "None";
isVisible = 0;
}
};

D.addeventlistener ("Click", Hidefn, True);

function Show (string) {
ele.innerhtml = string;
Ele.style.display = "block";
isVisible = 1;
Cleartimeout (identity);
Identity = SetTimeout (function () {
Ele.style.display = "None";
isVisible = 0;
}, 4000);

return identity;
}

return show;
}())
};

/**
* Popup window Prompt function
* Dialog.show (JQ) Display pop-up window
* Dialog.hide () Close the pop-up window
*/
Dialog: (function () {
var overlay, Dialog;

if ($ ("#overlay"). Length > 0) { //check if #overlay exists

Overlay = $ ("#overlay");
} else {
Overlay = $ (' <div id= "overlay" class= "overlay" ></div> "). AppendTo ($ (" body "));
}

Dialog = $ (". Dialog-box");

var show = function (JQ) {
Overlay.show ();
Jq.show ();//Specific bullet frame display
};

var hide = function () {
Dialog.hide ();//Full frame Hide
Overlay.hide ();
};

Dialog.find (". Btn-close"). On ("click", Function (event) {//This is a cross close button
$ (event.target). Parents (". Dialog-box"). Hide ();the//target property specifies which DOM element triggers the eventOverlay.hide ();
});

Overlay.on ("click", Hide);//equivalent to clicking on the frame, the box is hidden

return {
Show:show,
Hide:hide
}
}()),

This article from "Big Sweet potato 1th" blog, declined reprint!

Frame CSS, JS