<!DOCTYPE html> <html> <head> <title> new document </title> <meta charset="utf-8"> <style> .alert{ border:1px solid #a33; color:#00d; background:#fee; padding:10px; overflow:hidden; } .fade{ height:0; opacity:0; transition:all .3s linear; } .in{ height:501px; opacity:1; } .close{ float:right; font-weight:bold; opacity:.5; cursor:pointer; transition:opacity .3s linear; } .close:hover{ opacity:1; } </style> </head> <body> <button data-trigger="pop">弹出提示</button> <div class="alert fade in"> <span class="close" data-trigger="close">×</span> <p>您的浏览器版本太低!请下载最新版本的浏览器!</p> </div> <script src="js/jquery-1.11.3.js"></script> <script> //找到data-trigger属性为close的元素绑定单击事件: $("[data-trigger='close']").click( function(){ //获得当前span的父元素,移除in class $(this).parent().removeClass("in"); } ) //找到data-trigger属性为pop的元素绑定单击事件: $("[data-trigger='pop']").click(function(){ //获得当前元素的下一个兄弟,添加in class $(this).next().addClass("in"); }) </script> </body> </html>
drawdown
最新推荐文章于 2019-12-31 13:26:01 发布