以下是 JS+CSS3实现动感弹窗提示框插件 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>JS+CSS3实现动感弹窗提示框插件</title>
<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/sweet-alert.css">
<script src="js/sweet-alert.min.js"></script>
</head>
<body>
<h1>Sweet Alert</h1>
<!-- What does it do? -->
<h3>So... What does it do?</h3>
<p>Here’s a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
<div class="showcase normal">
<h4>Normal alert</h4>
<button>Show error message</button>
<h5>Code:</h5>
<pre><span class="func">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);
</pre>
<div class="vs-icon"></div>
</div>
<div class="showcase sweet">
<h4>Sweet Alert</h4>
<button>Show error message</button>
<h5>Code:</h5>
<pre>sweetAlert(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);</pre>
</div>
<p>Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
<!-- Examples -->
<h3>More examples</h3>
<p class="center">In these examples, we're using the shorthand function <strong>swal</strong> to call sweetAlert.</p>
<ul class="examples">
<li class="message">
<div class="ui">
<p>A basic message</p>
<button>Try me!</button>
</div>
<pre>swal(<span class="str">"Here's a message!"</span>)</pre>
</li>
<li class="title-text">
<div class="ui">
<p>A title with a text under</p>
<button>Try me!</button>
</div>
<pre>swal(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it?"</span>)</pre>
</li>
<li class="success">
<div class="ui">
<p>A success message!</p>
<button>Try me!</button>
</div>
<pre>swal(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)</pre>
</li>
<li class="warning">
<div class="ui">
<p>A warning message, with a function attached to the "Confirm"-button</p>
<button>Try me!</button>
</div>
<pre>swal({
title: <span class="str">"Are you sure?"</span>,
text: <span class="str">"Your will not be able to recover this imaginary file!"</span>,
type: <span class="str">"warning"</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonColor: <span class="str">"#DD6B55"</span>,
confirmButtonText: <span class="str">"Yes, delete it!"</span>
},
<span class="func"><i>function</i></span>(){
<span class="func">alert</span>(<span class="str">"Deleted!"</span>);
});</pre>
</li>
<li class="custom-icon">
<div class="ui">
<p>A message with a custom icon</p>
<button>Try me!</button>
</div>
<pre>swal({
title: <span class="str">"Sweet!"</span>,
text: <span class="str">"Here's a custom image."</span>,
imageUrl: <span class="str">"images/thumbs-up.jpg"</span>
});</pre>
</li>
</ul>
<!-- Download & Install -->
<h3 id="download-section">Download & install</h3>
<div class="center-container">
<p class="center"><b>Method 1:</b> Install through bower:</p>
<pre class="center">$ bower install sweetalert</pre>
</div>
<ol>
<li>
<p>Initialize the plugin by referencing the necessary files:</p>
<pre><<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"lib/sweet-alert.min.js"</span>></<span class="tag">script</span>>
<<span class="tag">link</span> <span class="attr">rel</span>=<span class="str">"stylesheet"</span> <span class="tag">type</span>=<span class="str">"text/css"</span> <span class="tag">href</span>=<span class="str">"lib/sweet-alert.css"</span>></pre>
</li>
<li>
<p>Call the sweetAlert-function after the page has loaded</p>
<pre>swal({
title: <span class="str">"Error!"</span>,
text: <span class="str">"Here's my error message!"</span>,
type: <span class="str">"error"</span>,
confirmButtonText: <span class="str">"Cool"</span>
});
</pre>
</li>
</ol>
<!-- Configuration -->
<h3>Configuration</h3>
<p class="center">Here are the keys that you can use if you pass an associative array into the sweetAlert:</p>
<table>
<tr class="titles">
<th> <div class="border-left"></div>
Argument </th>
<th>Default value</th>
<th> <div class="border-right"></div>
Description </th>
</tr>
<tr>
<td><b>title</b></td>
<td><i>null (required)</i></td>
<td>The title of the modal. It can either be put in the array under the key "title" or passed as the first parameter of the function.</td>
</tr>
<tr>
<td><b>text</b></td>
<td><i>null</i></td>
<td>A description for the modal. It can either be put in the array under the key "text" or passed as the second parameter of the function.</td>
</tr>
<tr>
<td><b>type</b></td>
<td><i>null</i></td>
<td>The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "<strong>warning</strong>", "<strong>error</strong>", "<strong>success</strong>" and "<strong>info"</strong>. It can either be put in the array under the key "type" or passed as the third parameter of the function.</td>
</tr>
<tr>
<td><b>allowOutsideClick</b></td>
<td><i>false</i></td>
<td>If set to <strong>true</strong>, the user can dismiss the modal by clicking outside it.</td>
</tr>
<tr>
<td><b>showCancelButton</b></td>
<td><i>false</i></td>
<td>If set to <strong>true</strong>, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.</td>
</tr>
<tr>
<td><b>confirmButtonText</b></td>
<td><i>"OK"</i></td>
<td>Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".</td>
</tr>
<tr>
<td><b>confirmButtonColor</b></td>
<td><i>"#AEDEF4"</i></td>
<td>Use this to change the background color of the "Confirm"-button (must be a HEX value).</td>
</tr>
<tr>
<td><b>cancelButtonText</b></td>
<td><i>"Cancel"</i></td>
<td>Use this to change the text on the "Cancel"-button.</td>
</tr>
<tr>
<td><b>imageUrl</b></td>
<td><i>null</i></td>
<td>Add a customized icon for the modal. Should contain a string with the path to the image.</td>
</tr>
<tr>
<td><b>imageSize</b></td>
<td><i>"80x80"</i></td>
<td>If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height.</td>
</tr>
</table>
<script>
document.querySelector('.showcase.normal button').onclick = function(){
alert("Oops... Something went wrong!");
};
document.querySelector('.showcase.sweet button').onclick = function(){
swal("操作失败", "内容 标题", "error");
};
document.querySelector('ul.examples li.message button').onclick = function(){
swal("内容");
};
document.querySelector('ul.examples li.title-text button').onclick = function(){
swal("内容", "内容官方地址：标题")
};
document.querySelector('ul.examples li.success button').onclick = function(){
swal("操作成功", "恭喜你，成功登陆内容（标题）", "success");
};
document.querySelector('ul.examples li.warning button').onclick = function(){
swal({
title: "确定操作吗？",
text: "你确定要删除这篇文章吗？",
type: "warning",
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'confirm'
},
function(){
alert("删除成功");
});
};
document.querySelector('ul.examples li.custom-icon button').onclick = function(){
swal({
title: "自定义图标",
text: "可以自定义提示框的图标！",
imageUrl: 'images/thumbs-up.jpg'
});
};
</script>
</body>
</html>CSS代码(example.css):
body{background-color:#f2f4f6;font-family:Verdana,Geneva,sans-serif;text-align:center;}
h1{background-image:url("../images/logo_big.png");background-image:-webkit-image-set(url("../images/logo_big.png") 1x,url("../images/logo_big@2x.png") 2x);width:385px;height:81px;text-indent:-9999px;white-space:nowrap;margin:50px auto;}
@media all and (max-width:420px){h1{width:300px;background-size:contain;background-repeat:no-repeat;background-position:center;}
}
@media all and (max-width:330px){h1{width:250px;}
}
h2{font-size:20px;color:#A9B2BC;line-height:25px;text-transform:uppercase;font-weight:300;text-align:center;display:block;}
h3{font-size:28px;color:#C7CCD1;text-transform:uppercase;font-family:sans-serif;margin-top:100px;text-align:center;position:relative;}
h3#download-section{margin-top:50px;padding-top:40px;}
h3::after{content:"";background-color:#e2e5e8;height:4px;width:700px;left:50%;margin-left:-350px;position:absolute;margin-top:-50px;border-radius:2px;}
@media all and (max-width:740px){h3::after{width:auto;left:20px;right:20px;margin-left:0;}
}
a{text-decoration:none;}
p{max-width:826px;margin:30px auto;font-size:17px;font-weight:300;color:#848D94;line-height:25px;text-align:left;}
p.center{text-align:center;}
p strong{color:#8A8F94;font-weight:600;}
p a{color:#9ECADF;font-weight:600;}
p a:hover{text-decoration:underline;}
p a.twitter{color:#5eaade;}
p a.dribbble{color:#f26798;}
p a.github{color:#323131;}
button,.button{background-color:#AEDEF4;color:white;border:none;box-shadow:none;font-size:17px;font-weight:500;font-weight:600;border-radius:3px;padding:15px 35px;margin:26px 5px 0 5px;cursor:pointer;}
button:focus,.button:focus{outline:none;}
button:hover,.button:hover{background-color:#a1d9f2;}
button:active,.button:active{background-color:#81ccee;}
button.cancel,.button.cancel{background-color:#D0D0D0;}
button.cancel:hover,.button.cancel:hover{background-color:#c8c8c8;}
button.cancel:active,.button.cancel:active{background-color:#b6b6b6;}
button.download,.button.download{position:fixed;right:30px;top:0;background-color:rgba(255,255,255,0.9);color:#ABCADA;font-weight:500;text-transform:uppercase;z-index:3;}
@media all and (max-width:1278px){button.download,.button.download{display:none;}
}
.center-container{max-width:700px;margin:70px auto;}
pre{background-color:#49483e;color:#f8f8f2;padding:10px;border-radius:5px;white-space:pre-line;text-align:left;font-size:14px;max-width:600px;}
pre .str{color:#e6db74;}
pre .func{color:#66d9ef;}
pre .val{color:#a381ff;}
pre .tag{color:#e92772;}
pre .attr{color:#a6e22d;}
.showcase{background-color:#eceef0;padding:20px;display:inline-block;width:383px;vertical-align:top;position:relative;}
@media all and (max-width:865px){.showcase{margin:5px auto;padding:46px 20px;}
}
@media all and (max-width:440px){.showcase{width:auto;}
}
.showcase h4{font-size:16px;color:#BCBCBC;line-height:22px;margin:0 auto;font-weight:400;}
.showcase.sweet h4{width:117px;height:25px;margin-top:-3px;text-indent:-9999px;background-image:url("../images/logo_small.png");background-image:-webkit-image-set(url("../images/logo_small.png") 1x,url("../images/logo_small@2x.png") 2x);}
.showcase h5{margin-bottom:-7px;text-align:left;font-weight:500;text-transform:uppercase;color:#c2c2c2;}
.showcase button{margin-bottom:10px;}
.showcase .vs-icon{background-image:url("../images/vs_icon.png");background-image:-webkit-image-set(url("../images/vs_icon.png") 1x,url("../images/vs_icon@2x.png") 2x);width:69px;height:69px;position:absolute;right:-34px;top:60px;z-index:2;}
@media all and (max-width:865px){.showcase .vs-icon{margin:5px auto;right:auto;left:50%;margin-left:-35px;top:auto;bottom:-35px;}
}
ul.examples{list-style-type:none;width:700px;margin:0 auto;text-align:left;padding-left:0;}
@media all and (max-width:758px){ul.examples{width:auto;}
}
ul.examples li{padding-left:0;}
ul.examples .ui,ul.examples pre{display:inline-block;vertical-align:top;}
@media all and (max-width:758px){ul.examples .ui,ul.examples pre{display:block;max-width:none;margin:0 auto;}
}
ul.examples .ui{width:300px;text-align:center;}
ul.examples .ui button{margin-top:12px;}
ul.examples .ui p{text-align:center;margin-bottom:0;}
ul.examples pre{max-width:370px;margin-top:67px;}
@media all and (max-width:758px){ul.examples pre{margin-top:16px !important;margin-bottom:60px;}
}
ul.examples .warning pre{margin-top:93px;}
ol{max-width:700px;margin:70px auto;list-style-position:inside;padding-left:0;}
ol li{color:#A7ADB2;}
ol li p{margin-bottom:10px;}
table{width:700px;font-size:14px;color:#8a8f94;margin:10px auto;text-align:left;border-collapse:collapse;}
@media all and (max-width:750px){table{width:auto;margin:10px 20px;}
}
table th{background-color:white;padding:9px;color:#acb9be;font-weight:400;text-align:center;position:relative;}
table th .border-left,table th .border-right{position:absolute;background-color:white;border-radius:50%;top:0;left:-17px;width:37px;height:37px;}
table th .border-right{left:auto;right:-17px;}
@media all and (max-width:750px){table th:nth-child(2){display:none;}
}
table td{padding:10px 20px;vertical-align:top;}
table td:first-child{padding-left:0px;}
table td:last-child{padding-right:0px;}
@media all and (max-width:750px){table td:nth-child(2){display:none;}
}
@media all and (max-width:360px){table td{padding:10px 4px;}
table td b{font-size:13px;}
}
footer{margin-top:100px;padding-bottom:30px;color:#9A999F;display:inline-block;position:relative;color:gray;font-weight:400;color:#93a1aa;font-weight:300;}
footer .te-logo{text-indent:-99999px;background-size:contain;background-repeat:no-repeat;background-position:center center;height:16px;width:16px;display:inline-block;margin-right:5px;background-image:url("../images/te-logo-small.svg");position:absolute;left:-22px;top:3px;}
分享到QQ
分享到微博
微信扫一扫
