Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta
// @require https://update.greasyfork.org/scripts/463930/1177945/MyModal.js
You will need to install an extension such as Stylus to install this script.
You will need to install an extension such as Stylus to install this script.
Bạn sẽ cần cài đặt một tiện ích mở rộng như Stylus để cài đặt kịch bản này.
Bạn sẽ cần cài đặt tiện ích mở rộng Trình quản lý kiểu người dùng để cài đặt tập lệnh này.
Bạn sẽ cần cài đặt tiện ích "Quản lý kiểu người dùng" để cài đặt tập lệnh này.
(I already have a user style manager, let me install it!)
// ==UserScript==
// @name MyModal
// @namespace http://https://wish123.cnblogs.com/?MyModal
// @version 0.1.1.2
// @description 原生js弹出层
// @author Wilson
function MyModal(options) {
this.zIndex = 1010
this.config = options || {}
this.modal = null;
if(this.config) {
this.createStyle();
this.create();
}
}
MyModal.prototype.createStyle = function() {
if(document.querySelector("#myModalStyle")) {
return;
}
let style = `
<style id="myModalStyle">
/* The Modal (background) */
.my-modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1010; /* Sit on top */
padding-top: 100px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.my-modal button {
background-color: #1c9fff;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.my-modal button:hover {
opacity:1;
}
.my-modal h2{
margin: 15px 0;
}
/* Modal Content */
.my-modal .modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 50%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s;
border-radius: 5px;
}
.my-modal .modal-body-content{
font-size: 16px;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.my-modal .close {
color: #333;
float: right;
font-size: 28px;
font-weight: bold;
}
.my-modal .modal-header .close{
margin-top: 6px;
}
.my-modal .close:hover,
.my-modal .close:focus {
color: #333;
text-decoration: none;
cursor: pointer;
opacity: 0.60;
}
.my-modal .modal-header {
padding: 2px 16px;
background-color: #fff;
color: #333;
border-bottom: 1px solid #f0f0f0;
border-radius: 5px;
}
.my-modal .modal-body {
padding: 10px 16px;
min-height: 28px;
line-height: 28px;
overflow: auto;
}
.my-modal .modal-footer {
padding: 2px 16px;
background-color: #fff;
color: #333;
/* border-top: 1px solid #f0f0f0; */
border-radius: 5px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-modal .cancelbtn,.my-modal .okbtn {
float: right;
width: 50%;
}
/* Add a color to the cancel button */
.my-modal .cancelbtn {
background-color: #f1f1f1;
color: #333;
/* border: 1px solid #dedede; */
}
/* Add a color to the delete button */
.my-modal .okbtn {
background-color: #1c9fff;
}
@media screen and (max-width: 300px) {
.my-modal .cancelbtn,.my-modal .okbtn {
width: 100%;
}
}
</style>
`
document.body.insertAdjacentHTML("beforeend", style);
}
MyModal.prototype.create = function(options) {
options = options || this.config
if(document.querySelector("#myModal")) {
document.querySelector("#myModal").remove();
}
let width = options.width ? 'width:'+options.width+';' : '';
let height = options.height ? 'height:'+options.height+';' : '';
let borderRadius = options.borderRadius ? 'border-radius:'+options.borderRadius+';' : '';
let zIndex = options.zIndex ? 'z-index:'+options.zIndex+';' : '';
let myModal = `
<div id="myModal" class="my-modal" style="${zIndex}${options.top?'padding-top:'+options.top+';':''}">
<div class="modal-content" style="${width}${height}${borderRadius}">
<div class="modal-header" style="${borderRadius}${options.title===null?'display:none;':''}${options.content===null?'border-bottom:none':''}">
<span class="close">×</span>
<h2>${options.title||''}</h2>
</div>
<div class="modal-body" style="${options.content===null?'display:none;':''}">
${options.title===null?'<span class="close">×</span>':''}
<div class="modal-body-content">${options.content||''}</div>
</div>
<div class="modal-footer" style="${borderRadius}${options.okText===null&&options.closeText===null?'display:none;':''}">
<div class="clearfix">
<button type="button" class="okbtn" style="${options.okText===null?'display:none;':''}${options.okWidth?'width:'+options.okWidth+';':''}">${options.okText||'OK'}</button>
<button type="button" class="cancelbtn" style="${options.closeText===null?'display:none;':''}${options.closeWidth?'width:'+options.closeWidth+';':''}">${options.closeText||'Cancel'}</button>
</div>
</div>
</div>
</div>`
document.body.insertAdjacentHTML("beforeend", myModal);
this.modal = document.querySelector(`#myModal`);
if(options.height) {
document.querySelector("#myModal .modal-body").style.height = (parseFloat(options.height) - 125) + 'px';
}
let modalContent = document.querySelector(".modal-content");
setTimeout(()=>{
if(modalContent.offsetHeight){
let padding = document.documentElement.clientHeight - modalContent.offsetHeight;
padding = padding > 0 ? padding : 0;
this.modal.style.paddingTop = (padding/2)+'px';
}
});
let _this = this;
//绑定关闭事件
let headerCloseBtn = document.querySelector(`#myModal .modal-header .close`);
if(headerCloseBtn) {
headerCloseBtn.addEventListener("click", function(e){
_this.close();
});
}
let bodyCloseBtn = document.querySelector(`#myModal .modal-body .close`);
if(bodyCloseBtn){
bodyCloseBtn.addEventListener("click", function(e){
_this.close();
});
}
//绑定cancel事件
document.querySelector(`#myModal .cancelbtn`).addEventListener("click", function(e){
if(_this.config.closeFn) {
e.myModal = _this;
_this.config.closeFn(e);
} else {
_this.close();
}
});
//绑定OK事件
document.querySelector(`#myModal .okbtn`).addEventListener("click", function(e){
if(_this.config.okFn) {
e.myModal = _this;
_this.config.okFn(e);
} else {
_this.close();
}
});
//点击空白,菜单消失
document.addEventListener('click', function(e){
if (e.target == _this.modal) {
_this.close();
}
});
}
MyModal.prototype.show = function() {
if(this.modal) {
this.modal.style.display = 'block';
}
}
MyModal.prototype.close = function() {
if(this.modal) {
this.modal.remove();
}
}
// //测试1
// document.querySelector("#test1").addEventListener("click", function(){
// new MyModal({
// top: '',
// width: '50%',
// height: 'auto',
// borderRadius: '5px',
// zIndex: 1010,
// //null,不显示title
// title: 'test1',
// //支持HTML格式,null不显示content
// content: 'Hello World!',
// //closeText:null,不显示关闭按钮
// closeText: '关闭',
// closeWidth: '',
// //okText:null,不显示ok按钮
// okText: '好了',
// okWidth: '',
// //closeFn和okFn可以省略
// closeFn: function (e) {
// console.log('closeFn clicked');
// e.myModal.close();
// },
// okFn: function (e) {
// console.log('okFn clicked');
// e.myModal.close();
// }
// }).show();
// });
// //测试2
// document.querySelector("#test2").addEventListener("click", function(){
// new MyModal({
// top: '',
// width: '50%',
// height: 'auto',
// borderRadius: '5px',
// zIndex: 1010,
// title: 'test2',
// content: 'Hello World2!',
// closeText: '取消',
// closeWidth: '',
// okText: '确定',
// okWidth: '',
// closeFn: function (e) {
// console.log('closeFn clicked');
// e.myModal.close();
// },
// okFn: function (e) {
// console.log('okFn clicked');
// e.myModal.close();
// }
// }).show();
// });