当前位置：首页 > 网页特效 > 其他

bootstrap4和jQuery消息通知插件

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

在页面中引入jquery和bootstrap4相关文件，以及notifyMessage相关文件。

```html
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>    
<link rel="stylesheet" type="text/css" media="screen" href="css/notifyMessage.css" />
<script src="js/notifyMessage.js"></script> 
```               
##### 初始化插件 
该jQuery消息通知插件最基本的使用方法如下：

```html
runNotify({
  message: '这是一则消息通知',
  messageTitle: '标题'
});       
```        
可以指定消息框在多少秒钟之后消失。

```html
runNotify({
  message: '这是一则消息通知',
  messageTitle: '标题',
  timer: '5000'
});     
```          
也可以使消息框固定在屏幕上，手动点击关闭按钮才消失。

```html
runNotify({
  message: '这是一则消息通知',
  messageTitle: '标题',
  type: 'fixed'
});  
```             
可以定义消息的主题颜色。

runNotify({
```html
  message: '这是一则成功消息通知',
  messageTitle: '标题',
 levelMessage: 'success'
});     
 
runNotify({
  message: '这是一则错误消息通知',
  messageTitle: '标题',
 levelMessage: 'error'
}); 
 
runNotify({
  message: '这是一则警告消息通知',
  messageTitle: '标题',
 levelMessage: 'warning'
});     
```      
还可以通过点击“查看更多”链接打开模态对话框。

```html
runNotify({
    message: 'Success message text!',
    levelMessage: 'success',
    type: 'readmore',
    messageTitle: 'Title of modal',
    readMoreMessage: 'Open the notify!'
}); 
```

web299.com

bootstrap4和jQuery消息通知插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果