JSはユーザー定義のポップアップ機能を実現します。
ご存知のように、ブラウザが持っている原生の弾戸は見苦しいです。そして機能は単一です。ほとんどの場合、設計図に基づいてユーザー定義の弾戸を作ったり、layerに注入された弾窓を直接使ったりします。先日、憧れの授業でネットでユーザー定義のパチンコの実現を見ました。ついでに勉強して書いてみました。以下は主にコードを実現し、比較的詳しい注釈を加えました。コードはES 6部分の書き方を使用していますが、もし低バージョンのブラウザに対応したいなら、関連コードをs 5書き方に変えてください。後は互換性の良いS 5バージョンに更新する時間があります。
HTML部分:(ボタンコール機能がないので、jsで実例を呼び出したら参考にできます。)
締め括りをつける
以上は小编が皆さんに绍介したJSがユーザー用のポップアップ机能を実现しました。皆さんに何かご质问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
HTML部分:(ボタンコール機能がないので、jsで実例を呼び出したら参考にできます。)
<!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> </title>
<link rel="stylesheet" href="alert.css" rel="external nofollow" >
</head>
<body>
<button>Click me</button>
<script src="index.js"></script>
<script>
document.querySelector("button").addEventListener("click",()=>{
new $Msg({
content:" ",
type:"success",
cancle:function(){
let cancle = new $Msg({
content:" "
})
},
confirm:function(){
new $Msg({content:" "})
}
})
})
</script>
</body>
</html>
スタイルの部分:参考にしてもいいです。デザインは自分の設計図によって自分で変更すればいいです。
/* */
.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;
}
/* */
.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;
}
/* */
.msg__wrap .msg-body {
padding: 10px 10px 10px 10px;
display: flex;
}
/* */
.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: " ";
}
.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: " ";
}
.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: " ";
}
/* */
.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;
}
/* */
.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;
}
/* */
.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の部分:以下は一番主要な部分で、jsの方法とインタラクションです。自分でカスタマイズしたコンポーネントをカプセル化してもいいです。これを参考にして自分のコンポーネントをパッケージ化します。
/*
*
*/
//
// windwo document window document ,
// window 。
(function (window, document) {
// Msg 。
let Msg = function (options) {
//
this._init(options);
}
//
Msg.prototype = {
_init({
content = "", //
type = "info", //
useHTML = false, // html
showIcon = true, //
confirm = null, //
cancle = null, //
footer = true, //
header = true, //
title = " ", //
contentStyle = {}, //
contentFontSize = "1.5em", //
btnName = [" ", " "] //
}) {
// this
this.content = content;
this.type = type;
this.useHTML = useHTML;
this.showIcon = showIcon;
this.confirm = confirm;
this.cancle = cancle;
this.footer = footer;
this.header = header;
this.title = title;
this.contentStyle = contentStyle;
this.contentFontSize = contentFontSize;
this.btnName = btnName;
//
this._creatElement();
//
this._show({
el: this._el,
overlay: this._overlay
});
//
this._bind({
el: this._el,
overlay: this._overlay
});
},
//
_creatElement() {
//
let wrap = document.createElement("div");
wrap.className = "msg__wrap";
//
const [confirmBtnName, cancelBtnName] = this.btnName;
//
const headerHTML = this.header ?
`<div class="msg-header">
<span>${this.title}</span>
<span class="msg-header-close-button">×</span>
</div>` : "";
//
const iconHTML = this.showIcon ?
`<div class="msg-body-icon">
<div class="msg-body-icon-${this.type}"></div>
</div>` : "";
//
const footerHTML = this.footer ?
`<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>` : "";
// html
const innerHTML = `${headerHTML}
<div class="msg-body">
${iconHTML}
<div class="msg-body-content"></div>
</div>
${footerHTML}`;
// html wrap
wrap.innerHTML = innerHTML;
//
const contentStyle = {
fontSize: this.contentFontSize,
...this.contentStyle
}
// DOM
let content = wrap.querySelector(".msg-body .msg-body-content");
// contentDOM
for (const key in contentStyle) {
if (contentStyle.hasOwnProperty(key)) {
content.style[key] = contentStyle[key];
}
}
// conntent
if (this.useHTML) {
content.innerHTML = this.content;
} else {
content.innerText = this.content;
}
//
let overlay = document.createElement("div");
overlay.className = "msg__overlay";
// dom
this._overlay = overlay;
this._el = wrap;
},
//
_show({
el,
overlay
}) {
// dom
document.body.appendChild(el);
document.body.appendChild(overlay);
// timeout
setTimeout(() => {
el.style.transform = "translate(-50%,-50%) scale(1,1)";
overlay.style.opacity = "1";
})
},
//
_close({
el,
overlay
}) {
// dom
el.style.transform = "translate(-50%,-50%) scale(0,0)";
overlay.style.opcity = "0";
//
setTimeout(() => {
// dom
document.body.removeChild(el)
document.body.removeChild(overlay);
}, 300);
},
// , DOM
_bind({
el,
overlay
}) {
// this
//const _this = this;
const cancle = (e) => {
this.cancle && this.cancle.call(this, e);
//
//hideMsg();
this._close({
el,
overlay
});
}
//
const confirm = (e) => {
this.confirm && this.confirm.call(this, e);
this._close({
el,
overlay
});
}
//
if (this.header) {
el.querySelector(".msg-header-close-button").addEventListener("click", cancle);
}
//
if (this.footer) {
el.querySelector(".msg-footer-cancel-button").addEventListener("click", cancle);
el.querySelector(".msg-footer-confirm-button").addEventListener("click", confirm)
}
}
}
// window,
window.$Msg = Msg;
})(window, document);
ここで、完全なカスタムのポップアップモジュールが完成しました。このjsとcssを導入するか、直接に関連コードを自分のパブリックjsに加えるだけで、直接に呼び出すことができます。締め括りをつける
以上は小编が皆さんに绍介したJSがユーザー用のポップアップ机能を実现しました。皆さんに何かご质问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。