SweetAlert简单使用，弹出对话框

女爷i 2022-07-14 04:37 324阅读 0赞

SweetAlert可以替代[JavaScript][]原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

使用方法  
要使用该插件，首先要在html的header中引入以下文件：

最基本的调用方法：  
sweetAlert("Hello world!");

带错误图标的警告框：  
sweetAlert("Oops...", "Something went wrong!", "error");

一个带有确认按钮的警告框，点击确认按钮可触发动画：  
sweetAlert(\{   
title:  "Are you sure?" ,  
text:  "You will not be able to recover this imaginary file!" ,  
type:  "warning" ,  
showCancelButton:  true ,  
confirmButtonColor:  "\#DD6B55" ,  
confirmButtonText:  "Yes, delete it!" ,  
closeOnConfirm: false  
\},  function() \{   
swal( "Deleted!",  
"Your imaginary file has been deleted.",  
"success" );  
\});

### 下面给出一个demo： ###

### 在一些情景模式中，我们需要点击一个按钮，然后有确定和取消的选择，选择了确定就执行取消，选择了取消，就什么也不做。 ###

首先在html中有：

表面我想删除一条信息，然后利用sweetalert给我们弹出对话框并做出选择。其中js中代码如下

function check(id){
    			swal(
    				{title:"您确定要删除这条信息吗",
    				text:"删除后将无法恢复，请谨慎操作！",
    				type:"warning",
    				showCancelButton:true,
    				confirmButtonColor:"#DD6B55",
    				confirmButtonText:"是的，我要删除！",
    				cancelButtonText:"让我再考虑一下…",
    				closeOnConfirm:false,
    				closeOnCancel:false
    				},
    				function(isConfirm)
    				{
    					if(isConfirm)
    					{
    						swal({title:"删除成功！",
    							text:"您已经永久删除了这条信息。",
    							type:"success"},function(){window.location="${pageContext.request.contextPath}/admin?action=deleteArticleById&id="+id})
    					}
    					else{
    						swal({title:"已取消",
    							text:"您取消了删除操作！",
    							type:"error"})
    					}
    				}
    				)
    		}

然后当我们点击一下删除按钮，就会利用sweetalert弹出确认删除的对话框，我们点击确定就删除，点击取消就取消了。sweetalert的对话框特别漂亮，

总的来说，它最基本的格式就是：  swal(\{ 写弹的内容，样式，颜色\}，\{ 写后面执行的代码； \}）我们所有需要执行的代码全部放到那个后面的那里。  
上面的代码，点击删除后会出现下图：

![SouthEast][]

可以发现成功的弹出来了对话框，此时注意下背后的id，显示共37条数据，然后我们测试点击取消。出现了下图

![SouthEast 1][]

发现后面的没有变化。说明没有删除，然后再次点击删除并点击确定删除，如下图：

![SouthEast 2][]

最后一个id已经变为36了，表面成功删除！上面的就是简单的利用

### [SweetAlert][]进行弹出对话框执行常规的删除确定取消等操作。 ###

### 对于新手来说最重要的就是 ###

swal(\{ 写弹的内容，样式，颜色\}，\{ 写后面执行的代码； \})

### 可用参数 ###

<table style="font-size:14px; color:rgb(0,0,0); margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; word-break:break-word; font-family:Verdana,Arial,Helvetica,sans-serif"> 
 <tbody style="margin:0px; padding:0px"> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse; width:150px"> 参数</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse; width:150px"> 默认值</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 描述</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> title</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null(required) &nbsp; &nbsp; &nbsp;</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 窗口的名称。可以通过对象的"title"属性或第一个参数进行传递。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> text</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 窗口的描述。可以通过对象的"text"属性或第二个参数进行传递。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> type</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 窗口的类型。SweetAlert 有4种类型的图标动画："warning", "error", "success" 和 "info".可以将它放在"type"数组或通过第三个参数传递。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> allowOutsideClick</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> false</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 如果设置为“true”，用户可以通过点击警告框以外的区域关闭警告框。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> showCancelButton</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> false</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 如果设置为“true”，“cancel”按钮将显示，点击可以关闭警告框。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> confirmButtonText</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> "OK"</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 该参数用来改变确认按钮上的文字。如果设置为"true"，那么确认按钮将自动将"Confirm"替换为"OK"。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> confirmButtonColor</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> "#AEDEF4"</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 该参数用来改变确认按钮的背景颜色（必须是一个HEX值）。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> cancelButtonText</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> "Cancel"</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 该参数用来改变取消按钮的文字。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> closeOnConfirm</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> true</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 如果希望以后点击了确认按钮后模态窗口仍然保留就设置为"false"。该参数在其他SweetAlert触发确认按钮事件时十分有用。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> imageUrl</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 添加自定义图片到警告框上。必须是图片的完整路径。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> imageSize</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> "80x80"</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 当设定图片的路径后，你可以设定图片的大小，格式为两个数字中间带个"x"符号。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px"> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> timer</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> null</td> 
   <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 警告框自动关闭的时间。单位是ms。</td> 
  </tr> 
 </tbody> 
</table>

[JavaScript]: http://lib.csdn.net/base/javascript
[SouthEast]: /images/20220714/d0051749dd1446ab865067bae44b852e.png
[SouthEast 1]: /images/20220714/1e8f2bac9cc24571b285363537252f1b.png
[SouthEast 2]: /images/20220714/afb5cff348de4202a33eeca7facf9416.png
[SweetAlert]: http://www.baidu.com/link?url=h99mHhRdrjZre19vRiXzKfM1tPMCHZqdZrwbNSPgpyGkH7R-dwb9NcVTJpX73Xow