工作中,有时会碰到警报弹窗样式不好看,而且需要点击确定才能继续往下执行这样的问题,所以自己写了一个弹窗,有原生版本和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>点击出现弹窗</title>
<script type="text/javascript" src="./jquery-1.11.0.js"></script>
<style>
/*弹出框公共样式(兼容IE)*/
.pop_up{
position: fixed;
width: 450px;
top: 50%;
left: 50%;
margin-left: -225px;
margin-top: -38px;
display: table;
color: white;
z-index: 100;
border-radius: 5px;
}
.pop_up p{
display: table-cell;
font-size: 16px;
line-height: 16px;
margin: 0 auto;
padding: 30px 15px;
text-align: center;
}
.pop_up p span{
font-weight: bold;
}
.pop_up{
background: -webkit-linear-gradient(#ffc8ba, #e4451c) !important;
background: -o-linear-gradient(#ffc8ba, #e4451c) !important;
background: -moz-linear-gradient(#ffc8ba, #e4451c) !important;
background: linear-gradient(#ffc8ba, #e4451c) !important;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffc8ba, endColorstr=#e4451c) !important;/*IE<9>*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffc8ba, endColorstr=#e4451c) !important;";/*IE8+*/
display: none;
}
</style>
</head>
<body>
<p id="tanJq">点击出现jq版弹窗</p>
<p id="tanProto">点击出现原生版弹窗</p>
</body>
</html>
<script>
//弹窗jq版
function popWindow(data){
var windowHtml = '<div class="pop_up">'+
'<p><span class="pop_content">'+data+'</span></p>'+
'</div>'
$('body').append(windowHtml);
$(".pop_up").css('display','table');
var myTimer = setTimeout(function(){
$(".pop_up").remove();
},2000)
}
$('#tanJq').click(function(){
var aaa = 'jq版!'
popWindow("弹出来吧!"+aaa)
})
</script>
<script>
function dolor(str){
if(str.charAt(0) == '#'){
return document.getElementById(str.substring(1));
}else if(str.charAt(0) == '.'){
return document.getElementsByClassName(str.substring(1));
}else{
return document.getElementsByTagName(str);
}
}
//弹窗原生版
function popProto(data){
var divObj = document.createElement("div");
divObj.className = "pop_up";
dolor("body")[0].appendChild(divObj);
var pObj = document.createElement('p');
divObj.appendChild(pObj);
var spanObj = document.createElement('span');
spanObj.innerHTML = data;
pObj.appendChild(spanObj);
dolor(".pop_up")[0].style.display = 'table';
var myTimer = setTimeout(function(){
dolor('body')[0].removeChild(dolor('.pop_up')[0]);
},2000)
}
dolor('#tanProto').onclick = function(){
var aaa = '原生版!'
popProto("弹出来吧!"+aaa)
}
</script>
点击动态创建弹出框,2S后自动关闭。(用以替换警示弹窗,样式好看,并且不需要点确定)
欢迎使用Markdown编辑器
你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写博客:
- 全新的界面设计 ,将会带来全新的写作体验;
- 在创作中心设置你喜爱的代码高亮样式,Markdown 将代码片显示选择的高亮样式 进行展示;
- 增加了 图片拖拽 功能,你可以将本地的图片直接拖拽到编辑区域直接展示;
- 全新的 KaTeX数学公式 语法;
- 增加了支持甘特图的mermaid语法1 功能;
- 增加了 多屏幕编辑 Markdown文章功能;
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能,功能按钮位于编辑区域与预览区域中间;
- 增加了 检查列表 功能。
功能快捷键
撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
合理的创建标题,有助于目录的生成
直接输入1次#,并按下space后,将生成1级标题。
输入2次#,并按下space后,将生成2级标题。
以此类推,我们支持6级标题。有助于使用TOC
语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片:
带尺寸的图片:
居中的图片:
居中并且带尺寸的图片:
当然,我们为了让用户更加便捷,我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面,选择一款你喜欢的代码片高亮样式,下面展示同样高亮的 代码片
.
// An highlighted block
var foo = 'bar';