JS 实现自定义弹窗

复制下面代码到浏览器的控制台直接可以使用

/**
*自定义的alert弹窗
* @param title 标题
* @param infoContent 需要显示的提示信息
* @param OkBtnContent 确定按钮的文本信息
* @param calcelBtnContent 取消按钮的文本信息
*/
function MyAlert(title,infoContent,OkBtnContent,calcelBtnContent) {
return new Promise(function (resolve) {
const confirmWrap = document.createElement('div')
confirmWrap.className = 'MyAlertBox'
const style = document.createElement('style')
style.innerHTML = `
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.postbird-box-container {
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 210000001;
background-color: rgba(0, 0, 0, 0.2);
display: block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.postbird-box-container.active {
display: block;
}

.postbird-box-content {
width: 400px;
max-width: 90%;
min-height: 150px;
background-color: #fff;
border: solid 1px #dfdfdf;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* margin-top: -100px; */
}

.postbird-box-header {
width: 100%;
padding: 10px 15px;
position: relative;
font-size: 1.1em;
letter-spacing: 2px;
}

.postbird-box-close-btn {
cursor: pointer;
font-weight: 700;
color: #000;
float: right;
opacity: 0.5;
font-size: 1.3em;
margin-top: -3px;
display: none;
}

.postbird-box-close-btn:hover {
opacity: 1;
}

.postbird-box-text {
width: 100%;
padding: 0 10%;
text-align: center;
line-height: 15px;
font-size: 14px;
letter-spacing: 1px;
}

.postbird-box-footer {
width: 100%;
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
display: flex;
display: -webkit-flex;
justify-content: space-around;
border-top: solid 1px #dfdfdf;
align-items: flex-end;
}

.postbird-box-footer .btn-footer {
line-height: 44px;
border: 0;
cursor: pointer;
background-color: #fff;
color: #0e90d2;
font-size: 1.1em;
letter-spacing: 2px;
transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
-moz-transition: background-color .5s;
outline: 0;
}

.postbird-box-footer .btn-footer:hover {
background-color: #e5e5e5;
}

.postbird-box-footer .btn-block-footer {
width: 100%;
}

.postbird-box-footer .btn-left-footer,
.postbird-box-footer .btn-right-footer {
position: relative;
width: 100%;
}

.postbird-box-footer .btn-left-footer::after {
content: "";
position: absolute;
right: 0;
top: 0;
background-color: #e5e5e5;
height: 100%;
width: 1px;
}

.postbird-box-footer .btn-footer-cancel {
color: #333333;
}

.postbird-prompt-input {
width: 100%;
font-size: 16px;
border: 1px solid #cccccc;
outline: none;
padding:5px 10px 5px 10px;
}`
confirmWrap.innerHTML = `
<div class="postbird-box-container active">
   <div class="postbird-box-container">
       <div class="postbird-box-dialog">
           <div class="postbird-box-content">
               <div class="postbird-box-header">
               <span class="postbird-box-close-btn">×</span>
               <span class="postbird-box-title">
                   <span >${title}</span>
               </span>
               </div>
               <div class="postbird-box-text"><span style="color:red;">${infoContent}</span>
               </div>
               <div class="postbird-box-footer">
               <button class="btn-footer btn-left-footer btn-footer-cancel" style="color:undefined;">${calcelBtnContent}</button>
               <button class="btn-footer btn-right-footer btn-footer-ok" style="color:#0e90d2;">${OkBtnContent}</button>
               </div>
           </div>
       </div>
   </div>
</div>`

document.getElementsByTagName('head').item(0).appendChild(style)
document.body.appendChild(confirmWrap)

const okBtn = document.getElementsByClassName('btn-footer-ok')
okBtn[okBtn.length - 1].focus()
okBtn[okBtn.length - 1].onclick = function () {
console.log('点击了确定')
const box = document.getElementsByClassName('MyAlertBox')

document.body.removeChild(box[box.length - 1])
resolve(1)
}
const cancelBtn = document.getElementsByClassName('btn-footer-cancel')
cancelBtn[cancelBtn.length - 1].onclick = function () {
console.log('点击了取消')
const box = document.getElementsByClassName('MyAlertBox')
document.body.removeChild(box[box.length - 1])
resolve(0)
}
})
}

//调用
MyAlert('提示','这里是具体显示的信息','取消','确定').then(result=>{
console.log('这里是点击了确定或者取消按钮后续的操作')
console.log('result' + result)
})

效果图：

备注：有些网页注入后会出现字体过大或者过小的问题，这种大部分是因为继承了一些当前页面的基础属性，可以把font 的权重(!important)设置为不可修改即可

例如本文中的：postbird-box-footer .btn-footer

中的font-size：1.1em 可以修改为 15px!important即可

JS 实现自定义弹窗相关推荐

JS函数自定义弹窗；纯JS实现弹窗
弹窗获取弹窗内穿出的数据: 在弹窗页面调用父级页面的方法,例:parent.xxx(data); 在 xxx()方法中将获取到的数据赋值给 abc 变量:在的点击弹窗确定按钮后调用 yyy()方法, ...
【微信小程序】自定义弹窗蒙版输入框效果图完整代码
[微信小程序]自定义弹窗文本输入框效果图&完整代码效果图在输入框中进行内容的输入点击确认后在姓名一栏进行更新修改点击返回后姓名一栏不做任何修改在这个的基础上你可以自定义任何弹窗 wx ...
微信小程序点击按钮弹出弹窗_微信小程序自定义弹窗(可通用)
本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗. 点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出). (后续可能会补充新需求,或可以留言讨论你的需求 ...
微信H5、移动端自定义弹窗事件穿透、底层页面滑动解决方案
前言之前有个项目是运行在移动端Web,和微信H5中,由于默认的弹窗UI不太好看,而且还不统一,所以页面需要自定义弹窗,添加icon.提示信息.操作按扭等样式. 问题描述: 如果在页面内容的高度超过了 ...
html怎么写点击后弹出提示框是否确认,基于JS+HTML实现弹窗提示是否确认提交功能...
需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下分析:这里面要,引入三个库文件,如下是下载地址代码:下载后放入响应的项目目录,最后代码如下 console.log(1) ...
flutter -各类自定义弹窗(图片预览，输入框，键盘)以及如何阻止事件冒泡
开局废话:由于公司app后期需要做混合开发,又担心h5的性能问题.于是迫不得已,只能两端齐搞,验证一些性能优化的问题.打开了一年前flutter正式发布时,蹭热度创建的现已布满藤蔓的仓库,微微颤抖的双 ...
ucharts tooltip自定义换行及自定义弹窗位置
ucharts tooltip自定义换行及自定义弹窗位置以下通过条形图进行演示  <qiu ...
php提交成功js弹窗,基于JS+HTML实现弹窗提示是否确认提交功能
需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下分析:这里面要,引入三个库文件,如下是下载地址代码:下载后放入响应的项目目录,最后代码如下 console.log(1) ...
js layui跳转页面_Layer.js提示层弹窗结束之后自动跳转到新页面的效果
弹层之美 Layer 是一款近年来备受青睐的web弹层组件,提供layer.open(options)核心调用方法.她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的 ...

JS 实现自定义弹窗

JS 实现自定义弹窗相关推荐

最新文章

热门文章