js自定义信息提示框

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button type="button" onclick="promptBox('信息提示和三个完全好人都不齐微积分军阀割据风格鞍山钢铁v奋斗成果哈斯v电话噶三个')">提示</button><script>/**提示框* @param {string} con：提示信息* @param {boolean} sx：是否需要刷新页面*/function promptBox(con, sx = false) {var db = document;var w = window;if (w.parent != undefined) {db = w.parent.document;}var box = document.createElement("div");db.body.appendChild(box);box.style = "position: fixed;left:0;right:0;top:0;bottom:0;z-index:200;";var div = document.createElement("div");box.appendChild(div);div.style ="width:500px;height:200px;padding:10px;border-radius:5px;background-color: #fff;box-shadow: 2px 0 2px #666 , -2px 0 2px #666,0 2px 2px #666,0 -2px 2px #666;position: absolute;top:50%;margin-top:-100px;left:50%;margin-left:-250px;";var h2 = document.createElement("h2");h2.innerHTML = "提示信息";h2.style = "line-height:40px;height:40px;font-size:20px;text-align:center;border-bottom:1px solid #ccc;margin:0;";div.appendChild(h2);var condiv = document.createElement("div");condiv.innerHTML = con;condiv.style ="line-height:24px;font-size:16px;border-bottom:1px solid #ccc;text-indent: 2rem;padding:5px;height:95px;";div.appendChild(condiv);var btn = document.createElement("div");div.appendChild(btn);btn.style = "text-align:right;padding:5px;height:45px;";btn.innerHTML = `<button>确定</button>`;var qd = btn.children[0];qd.onclick = function () {        db.body.removeChild(box);if (sx) {w.location.reload();}}}</script>
</body>
</html>

效果：

注：提示框位置默认在屏幕正中央

js自定义信息提示框相关推荐

js 自定义title提示框(附加文本框内容验证) (II)
在上一篇的基础上添加了一个小功能,验证文本框是否为空和数字效果图页面代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
BootStrap笔记-信息提示框的使用
程序运行截图如下: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
php使用自定义alert,IOS_iOS自定义alertView提示框实例分享，本文实例为大家分享iOS自定义a - phpStudy...
iOS自定义alertView提示框实例分享本文实例为大家分享iOS自定义alertView提示框,先上图,弹框的背景色,按钮背景色,提示的消息的字体颜色都可以改变利用单例实现丰富的自定义接口 / ...
1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5. 此外,所有的 <p> 元素 margin-top ...
DELMIA软件：文本信息提示框功能介绍与使用方法
目录概述文本信息创建修改文本信息增加文本信息删除文本信息仿真运行本文已经首发在个人微信公众号:工业机器人仿真与编程(微信号:IndRobSim),欢迎关注! 概述 DELMIA软件在机器 ...
php中如何写js代码提示_PHP 如何编写类似js中alert() 提示框
这篇文章主要介绍了PHP 实现类似js中alert() 提示框功能,非常的实用,这里推荐给大家,有需要的小伙伴来参考下,希望大家能喜欢. 主要应用于添加判断提示,跳转,返回,刷新. 代码如下:/** ...
WEB前端网页设计-Bootstrap4 信息提示框
目录提示框添加链接关闭提示框提示框动画 Bootstrap 4 可以很容易实现信息提示框. 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, ...
爬虫训练场项目前端之 Bootstrap 信息提示框，按钮与按钮组，徽章，进度条
爬虫训练场项目前端之 Bootstrap 信息提示框,按钮与按钮组,徽章,进度条 Bootstrap5 信息提示框 Bootstrap 5 按钮和按钮组 Bootstrap 5 徽章进度条 Boot ...
Bootstrap 信息提示框
一.Bootstrap 信息提示框 1.1 基本信息提示框提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .a ...
自定义Dialog提示框高仿QQ浏览器版本更新提示框
前言: 今天是5月7号,真的好久没有写博客了,时光匆匆,我总感觉自己忙忙碌碌似的,静想片刻确实是挺忙的,但是在繁忙当中却缺少了总结归纳,相信大家都知道总结归纳的重要性了,今天我要和大家分享我的自定义D ...

js自定义信息提示框

js自定义信息提示框相关推荐

最新文章

热门文章