基于js实现动画效果弹窗提示框插件代码



59 233 78



特效描述:基于js实现 动画效果弹窗 提示框插件代码,基于js实现动画效果弹窗提示框插件代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/example.css">
<link rel="stylesheet" type="text/css" href="css/sweet-alert.css">

2. 引入JS

<script src="js/sweet-alert.min.js"></script>

3. HTML代码

<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({
&nbsp;&nbsp;title: <span class="str">"Are you sure?"</span>,
&nbsp;&nbsp;text: <span class="str">"Your will not be able to recover this imaginary file!"</span>,
&nbsp;&nbsp;type: <span class="str">"warning"</span>,
&nbsp;&nbsp;showCancelButton: <span class="val">true</span>,
&nbsp;&nbsp;confirmButtonColor: <span class="str">"#DD6B55"</span>,
&nbsp;&nbsp;confirmButtonText: <span class="str">"Yes, delete it!"</span>
},
<span class="func"><i>function</i></span>(){
&nbsp;&nbsp;<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({
&nbsp;&nbsp;title: <span class="str">"Sweet!"</span>,
&nbsp;&nbsp;text: <span class="str">"Here's a custom image."</span>,
&nbsp;&nbsp;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>&lt;<span class="tag">script</span> <span class="attr">src</span>=<span class="str">"lib/sweet-alert.min.js"</span>&gt;&lt;/<span class="tag">script</span>&gt;
&lt;<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>&gt;</pre>
  </li>
  <li>
    <p>Call the sweetAlert-function after the page has loaded</p>
    <pre>swal({
&nbsp;&nbsp;title: <span class="str">"Error!"</span>,
&nbsp;&nbsp;text: <span class="str">"Here's my error message!"</span>,
&nbsp;&nbsp;type: <span class="str">"error"</span>,
&nbsp;&nbsp;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("操作失败", "欢迎访问51前端 www.51qianduan.com", "error");
};
document.querySelector('ul.examples li.message button').onclick = function(){
	swal("欢迎访问51前端");
};
document.querySelector('ul.examples li.title-text button').onclick = function(){
	swal("欢迎访问51前端", "51前端官方地址:www.51qianduan.com")
};
document.querySelector('ul.examples li.success button').onclick = function(){
	swal("操作成功", "恭喜你,成功登陆51前端(www.51qianduan.com)", "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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 弹出层拖动 窗口 弹出 弹窗 弹出层 提示框 对话框 遮罩 遮罩层 弹窗插件 文字提示框 提示文字 h5弹窗动画 html5弹窗动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到