快捷導(dǎo)航

jQuery 中msgTips 頂部彈窗效果實(shí)現(xiàn)代碼

更新時(shí)間：2017年08月14日 11:01:59 作者：今晚再打老虎

最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗，并且不用用戶手動去點(diǎn)擊確定。感覺這樣很方便用戶，下面小編把實(shí)現(xiàn)代碼分享給大家，感興趣的的朋友一起看看吧

最近發(fā)現(xiàn)好多網(wǎng)站都采用頂部彈窗，并且不用用戶手動去點(diǎn)擊確定。感覺這樣很方便用戶，所以也找了好多大神的代碼，整理一下方便以后查找

前端：

@{
  Layout = null;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>jQuery網(wǎng)頁頂部顯示操作提示插件 - 聚合分享 - www.juheweb.com</title>
  <link href="~/top/css/css.css" rel="external nofollow" rel="stylesheet" />
  <script src="~/top/js/jquery-1.8.3.min.js"></script>
  <script src="~/top/js/msgTips.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#ie").manhua_msgTips({
        Event: "click",      //響應(yīng)的事件
        timeOut: 4000,        //提示層顯示的時(shí)間
        msg: "為了保證更好的網(wǎng)站體驗(yàn)，請升級IE版本到8.0或以上!",      //顯示的消息
        speed: 0,        //滑動速度
        type: "warning"      //提示類型（1、success 2、error 3、warning）
      });
      $("#no").manhua_msgTips({
        Event: "click",      //響應(yīng)的事件
        timeOut: 3000,        //提示層顯示的時(shí)間
        msg: "很抱歉!您好操作此插件錯(cuò)誤，請重新操作！",  //顯示的消息
        speed: 0,        //滑動速度
        type: "error"      //提示類型（1、success 2、error 3、warning）
      });
      $("#yes").manhua_msgTips({
        Event: "click",      //響應(yīng)的事件
        timeOut: 2000,        //提示層顯示的時(shí)間
        msg: "恭喜你！操作成功，歡迎訪問聚合分享網(wǎng)站",      //顯示的消息
        speed: 300,        //滑動速度
        type: "success"      //提示類型（1、success 2、error 3、warning）
      });
    });
  </script>
  <style>
    input {
      padding: 10px 20px;
    }
  </style>
</head>
<body>
  <div style="margin:300px auto; width:350px;">
    <input type="button" id="ie" value="警告提示" />&nbsp;&nbsp;
    <input type="button" id="no" value="錯(cuò)誤提示" />&nbsp;&nbsp;
    <input type="button" id="yes" value="成功提示" />
  </div>
</body>
</html>

個(gè)人感覺還是很好用的，這個(gè)是從某位大神那里引用來的，如果有冒犯，麻煩告訴我，我會刪除的

總結(jié)

以上所述是小編給大家介紹的jQuery 中msgTips 頂部彈窗效果實(shí)現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: