第一個 jq 外掛，兩種實現方式，只為記錄自己成長，不喜勿噴！
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.mask {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5)
}
.dialog {
display: none;
}
.dialog-panel {
background: #fff;
position: fixed;
top: 35%;
left: 50%;
transform: translateX(-50%);
z-index: 100;
border-radius: 10px;
padding-top: 10px;
}
.dialog-panel .panel-content {
padding: 20px 50px;
text-align: center;
font-size: 14px;
}
.dialog-panel .btn-group {
height: 40px;
line-height: 40px;
font-size: 14px;
padding: 0;
margin: 0;
overflow: hidden;
box-sizing: border-box;
border-top: 1px solid #efefef;
display: flex;
}
.dialog-panel .btn-group .btn {
float: left;
padding: 0 10px;
text-align: center;
width: 50%;
box-sizing: border-box;
flex: 1;
cursor: pointer;
}
.dialog-panel .btn-group .btn-confirm {
background: #108ee9;
color: #fff;
border-bottom-right-radius: 10px;
}
.panel-title {
height: 20px;
color: #108ee9;
text-align: center;
font-size: 16px;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
$(function () {
function CreatePerson(name) {
this.age = '15';
this.name = name;
this.showName = function () {
console.log(this.name)
}
}
let pl = new CreatePerson('曉明')
console.log(pl)
})
$(function () {
let panel = $(
` <div class="dialog-panel">
<div class="panel-content">
icoali
</div>
<div class="btn-group">
<div class="btn btn-cancel">取消</div>
<div class="btn btn-confirm">確定</div>
</div>
</div>`
)
let mask = $(`<div class="mask"></div>`)
let dialog = function () {
this.content = panel.find('.panel-content')
this.cancel = panel.find('.btn-group .btn-cancel')
this.confirmBtn = panel.find('.btn-group .btn-confirm')
$(document.body).append(panel).append(mask)
}
dialog.prototype.confirm = function (content1, title, btnArray, callback) {
this.content[0].innerHTML = content1
if (title != undefined) {
console.log(title)
this.content.before('<div class="panel-title">' + title + '</div>')
}
if (btnArray.length == 1) {
this.cancel.remove()
this.confirmBtn.text(btnArray[0])
} else {
this.cancel.text(btnArray[0])
this.confirmBtn.text(btnArray[1])
}
this.cancel.on('click', function () {
panel.remove()
mask.remove()
callback({
index: 1
})
})
this.confirmBtn.on('click', function () {
panel.remove()
mask.remove()
callback({
index: 2
})
})
}
let creatDialog = new dialog();
window['creatDialog'] = creatDialog
})
$(function () {
console.log(creatDialog)
creatDialog.confirm('你確定解綁麼？', '提示', ['取消', '確定'], function (e) {
let $box = $('#box')
if (e.index == 1) {
$box.text('取消了')
} else {
$box.text('確定了')
}
})
})
// $(function(){
// let dialog=function(params){
// let content=params.content;
// let cancelBtn=params.btn[0] || '取消';
// let confirmBtn =params.btn[1] || '確定';
// let confirmFn=params.confirmBtn;
// let cancelFn=params.cancelFn;
// let html=`<div class="dialog">
// <div class="mask"></div>
// <div class="dialog-panel">
// <div class="panel-content">
// ${content}
// </div>
// <div class="btn-group">
// <div class="btn btn-cancel">${cancelBtn}</div>
// <div class="btn btn-confirm">${confirmBtn}</div>
// </div>
// </div>
// </div>`
// $(document.body).append(html);
// console.log($(html).find('.btn-cancel'))
// $(body).find('.btn-cancel').on('click',function(){
// $(html).hide();
// cancelFn()
// }).next().on('click',function(){
// confirmFn();
// $(html).hide()
// })
// }
// dialog({
// content:'確定解綁嗎？ ',
// btn:['取消','確定'],
// confirmFn:function(){
// console.log(999)
// }
// })
// })
</script>
</body>
</html>
複製程式碼