As we all know, the native pop-up windows that come with the browser are not beautiful and have a relatively single function. Most of the time, we will customize pop-up windows according to the design drawings or directly use pop-up windows injected into the layer, etc. Some time ago, I saw a custom pop-up implementation on MOOC.com. I learned and tried to write it. The following is the main implementation code and added more detailed comments. I will share it for your reference. (The code uses the ES6 part of the writing method. If you need to be compatible with the lower version of the browser, please convert the relevant code to the ES5 writing method. If you have time, update it to an ES5 version with better compatibility.)
HTML part: (Nothing content: Put a button to call the function, and call an instance in js for reference)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Custom pop-up window</title>
<link rel="stylesheet" href="" rel="external nofollow" >
</head>
<body>
<button>Click me</button>
<script src=""></script>
<script>
("button").addEventListener("click",()=>{
new $Msg({
content:"My custom pop-up window is ready",
type:"success",
cancle:function(){
let cancle = new $Msg({
content:"I'm the callback after cancellation"
})
},
confirm:function(){
new $Msg({content:"I'm the callback after confirmation"})
}
})
})
</script>
</body>
</html>
Style part: It is also released for reference. The style can be changed by yourself according to your own design drawings.
/* The outermost layer of the pop-up box */
.msg__wrap {
position: fixed;
top: 50%;
left: 50%;
z-index: 10;
transition: all .3s;
transform: translate(-50%, -50%) scale(0, 0);
max-width: 50%;
background: #fff;
box-shadow: 0 0 10px #eee;
font-size: 10px;
}
/* Pop-up frame head */
.msg__wrap .msg-header {
padding: 10px 10px 0 10px;
font-size: 1.8em;
}
.msg__wrap .msg-header .msg-header-close-button {
float: right;
cursor: pointer;
}
/* The middle of the pop-up box */
.msg__wrap .msg-body {
padding: 10px 10px 10px 10px;
display: flex;
}
/* icon */
.msg__wrap .msg-body .msg-body-icon{
width: 80px;
}
.msg__wrap .msg-body .msg-body-icon div{
width: 45px;
height: 45px;
margin: 0 auto;
line-height: 45px;
color: #fff;
border-radius: 50% 50%;
font-size: 2em;
}
.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success{
background: #32a323;
text-align: center;
}
.msg__wrap .msg-body .msg-body-icon .msg-body-icon-success::after{
content: "become";
}
.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong{
background: #ff8080;
text-align: center;
}
.msg__wrap .msg-body .msg-body-icon .msg-body-icon-wrong::after{
content: "error";
}
.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info{
background: #80b7ff;
text-align: center;
}
.msg__wrap .msg-body .msg-body-icon .msg-body-icon-info::after{
content: "Note";
}
/* content */
.msg__wrap .msg-body .msg-body-content{
min-width: 200px;
font-size: 1.5em;
word-break: break-all;
display: flex;
align-items: center;
padding-left: 10px;
box-sizing: border-box;
}
/* bottom of the pop-up box */
.msg__wrap .msg-footer {
padding: 0 10px 10px 10px;
display: flex;
flex-direction: row-reverse;
}
.msg__wrap .msg-footer .msg-footer-btn {
width: 50px;
height: 30px;
border: 0 none;
color: #fff;
outline: none;
font-size: 1em;
border-radius: 2px;
margin-left: 5px;
cursor: pointer;
}
.msg__wrap .msg-footer .msg-footer-cancel-button{
background-color: #ff3b3b;
}
.msg__wrap .msg-footer .msg-footer-cancel-button:active{
background-color: #ff6f6f;
}
.msg__wrap .msg-footer .msg-footer-confirm-button{
background-color: #4896f0;
}
.msg__wrap .msg-footer .msg-footer-confirm-button:active{
background-color: #1d5fac;
}
/* Mask layer */
.msg__overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
background-color: rgba(0, 0, 0, .4);
transition: all .3s;
opacity: 0;
}
JS part: The following are the most important parts, js methods and interactions. You can encapsulate custom components yourself as a reference and encapsulate your own components.
/*
*Custom pop-up window
*/
//Self-execute function to form a closed scope to avoid global pollution//Passing in windwo and document objects is equivalent to using window and document as local variables in scope.//There is no need for internal functions to search the top-level window along the scope chain to improve operational efficiency.(function (window, document) {
//Define a constructor Msg as the constructor of the pop-up window instance. let Msg = function (options) {
//Perform initialization operation this._init(options);
}
//Define the initialization method and initialize the parameters passed by the method. = {
_init({
content = "", //Text content type = "info", //Information type useHTML = false, //Whether to parse html string showIcon = true, //Whether to display pop-up icon confirm = null, //Can callback after confirmation cancle = null, //Cancel callback footer = true, //Whether to display the confirmation button at the bottom header = true, // Whether to display header information and close button title = "hint", //Popular window title contentStyle = {}, //Content Style contentFontSize = "1.5em", //Content Font Size btnName = ["Sure", "Cancel"] //Button text content }) {
//Bind the passed value to this = content;
= type;
= useHTML;
= showIcon;
= confirm;
= cancle;
= footer;
= header;
= title;
= contentStyle;
= contentFontSize;
= btnName;
//Execute the method of creating element this._creatElement();
//Show pop-up windows and masks this._show({
el: this._el,
overlay: this._overlay
});
//Binding event handling function this._bind({
el: this._el,
overlay: this._overlay
});
},
// Method for creating pop-up elements _creatElement() {
//Create the outermost layer and wrap the element let wrap = ("div");
= "msg__wrap";
//Define pop-up window with two buttons const [confirmBtnName, cancelBtnName] = ;
//Judge whether pop-up title is displayed const headerHTML = ?
`<div class="msg-header">
<span>${}</span>
<span class="msg-header-close-button">×</span>
</div>` : "";
//Judge whether the icon is displayed const iconHTML = ?
`<div class="msg-body-icon">
<div class="msg-body-icon-${}"></div>
</div>` : "";
//Judge whether the button at the bottom of the pop-up window is displayed const footerHTML = ?
`<div class="msg-footer">
<button class="msg-footer-btn msg-footer-cancel-button">${cancelBtnName}</button>
<button class="msg-footer-btn msg-footer-confirm-button">${confirmBtnName}</button>
</div>` : "";
//Split the complete html const innerHTML = `${headerHTML}
<div class="msg-body">
${iconHTML}
<div class="msg-body-content"></div>
</div>
${footerHTML}`;
// Assign the spliced html to wrap = innerHTML;
//Merge custom styles const contentStyle = {
fontSize: ,
...
}
//Get the DOM to which the content belongs let content = (".msg-body .msg-body-content");
//Add the passed style to contentDOM for (const key in contentStyle) {
if ((key)) {
[key] = contentStyle[key];
}
}
// Assign value to pop-up content if () {
= ;
} else {
= ;
}
//Create a mask layer let overlay = ("div");
= "msg__overlay";
//mount the dom to the current instance this._overlay = overlay;
this._el = wrap;
},
//Popular window display method _show({
el,
overlay
}) {
//Insert the pop-up dom and mask into the page (el);
(overlay);
//Show pop-up window timeout asynchronously display animation setTimeout(() => {
= "translate(-50%,-50%) scale(1,1)";
= "1";
})
},
//Close the pop-up window method _close({
el,
overlay
}) {
//Hide dom = "translate(-50%,-50%) scale(0,0)";
= "0";
//Remove the animation after completion according to the animation time setTimeout(() => {
//Remove the dom and mask of pop-up window (el)
(overlay);
}, 300);
},
//Event handler function, bind event for DOM _bind({
el,
overlay
}) {
//Save the current this //const _this = this;
const cancle = (e) => {
&& (this, e);
//Hide pop-up window //hideMsg();
this._close({
el,
overlay
});
}
//Confirm pop-up window const confirm = (e) => {
&& (this, e);
this._close({
el,
overlay
});
}
//Top Close button binding event if () {
(".msg-header-close-button").addEventListener("click", cancle);
}
//Two buttons at the bottom of the pop-up window event monitoring if () {
(".msg-footer-cancel-button").addEventListener("click", cancle);
(".msg-footer-confirm-button").addEventListener("click", confirm)
}
}
}
//Expose the constructor to the window so that it can be called directly under the global scope window.$Msg = Msg;
})(window, document);
At this point, a complete custom pop-up component has been completed. You only need to introduce the js and css or directly add the relevant code to your own public js to call it directly. Note that the constructor call must be used with new.
Summarize
The above is the JS implementation of custom pop-up function introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!