jQuery提示效果代码分享

代码一：

复制代码如下： pa href=' # ' class=' tooltip ' title='这是我的超链接提示1 '提示1。/a/PPA技巧二。/a/PPA

复制代码如下： $ (function () {$(')。工具提示')。mouseenter(函数(e) {this。我的头衔=这个。给这个命名。title=' ' var a=' div '这个。我的标题'/div' $ ('body ')。追加(。$(“div”)。css({ 'top': (e.pageY y) 'px '，' left': (e.pageX x) 'px' })。show('fast') })。mouse out(function(){ this . title=this . my title；$(“div”)。移除()；});})

学习经验：不要在P标签下追加div元素，会有很大的偏差值！原来！这不同于$(“this”)。如果this.title被重写为$(“this”)。attr('title ')，下面的mouseout事件无法访问保存的标题

代码二：

参考CSS:jquery ui/CSS/ui-lighting/jquery-ui-1 . 8 . 18 . custom . CSS参考js:jquery ui/js/jquery-ui-1 . 8 . 18 . custom . min . js。

复制代码如下： script $(' # dialog : ui-dialog ')。对话框(“销毁”)；$ ('# dialog-message ')。dialog ({height : 120，width : 220，modal : true，buttons : { ' no ' : function(){//do something $(this))。对话框(“关闭”)；}，' is ' : function(){//do something $(this)。对话框(“关闭”)；} } });/script div id=' dialog-message ' title=' message box ' style=' display : none；高度： 120 px；' width:220px'我是一个弹出消息框/div

代码三：

使用javascript弹出层组件easyDialog

使用一段时间后，easyDialog总结了使用中遇到的一些问题。最近花了一段时间对原代码进行了重构和优化，增加了一些新的功能。原版本只针对实现简单弹出层的基本功能，也就是从项目角度如何快速完成项目。这个版本不仅实现了基本功能，还考虑了如何将弹出层更好更容易地应用到项目中。easyDialog v2.0的新功能：

1.将添加默认弹出层内容模板。如果只是一些简单的应用程序，可以传递几个简单的参数，而不用编写弹出层内容的结构。最初的使用方法：

复制代码如下：EasyDialog。打开({ container : ' DemoBox ' })；

使用默认内容模板，可以如下使用容器参数：

复制的代码如下：EasyDialog。打开({容器： {标题： '弹出层标题'，内容： '欢迎使用EasyDialog : ')，是FN : BTFN，否FN 3360 True })；

显示效果如下图所示：

如果想修改默认内容模板的样式，可以修改下载文档中的easydialog.css文件，达到自己想要的样式。2.增加了拖拽效果，使得弹出层具有更好的用户体验，通过自定义弹出层内容，可以轻松实现拖拽效果。3.内部增加了缓存系统和微事件处理系统，缓存了弹出层的内容，使得弹出层的性能更好。此外，修改了一个参数的名称，将原来的isOverlay改为Overlay，并将原来弹出层中每个元素的id重命名，尽可能避免冲突。

以上三种小技巧是我常用的。请根据自己的项目需求自由使用