jquery.message+bootstrap实现顶部消息弹出通知效果代码
代码语言:html
所属分类:弹出层
代码描述:jquery.message+bootstrap实现顶部消息弹出通知效果代码,包括成功提示、失败提示、警告提示、信息提醒等。
代码标签: jquery.message bootstrap 顶部 消息 弹出 通知
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.message.min.css"> <title> </title> <style> /* 非组件样式 */ .btn { margin-right: 20px; } .p40 { padding: 40px; } .mt20 { margin-top: 20px; } </style> </head> <body> <div class="p40"> <p>点击调用提示</p> <button class="btn btn-success">成功提示</button> <button class="btn btn-danger">失败提示</button> <button class="btn btn-warning">警告提示</button> <button class="btn btn-info">信息提醒</button> </div> <div class="p40"> <p>调用方式:</p> <pre> $('.btn-success').on('click',function(){ $.message('成功'); }) $('.btn-danger').on('click',function(){ $.message({ message:'失败提示', type:'error' }); }) $('.btn-warning').on('click',function(){ $.message({ message:'警告提示', type:'warning' }); }) $('.btn-info').on('click',function(){ $.message({ message:'信息提醒', type:'.........完整代码请登录后点击上方下载按钮下载查看
网友评论0