视图状态下鼠标移动到某文本上弹出小对话框-js实现

最新推荐文章于 2025-11-15 14:04:53 发布

原创最新推荐文章于 2025-11-15 14:04:53 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #javascript #object #string #class #脚本

myapps平台专栏收录该内容

14 篇文章

订阅专栏

使用JavaScript，通过鼠标悬停在文本上时弹出小对话框，解决了原本视图界面无法显示详细数据的问题。主要步骤包括：1.在style.css中编写样式，2.在list.js中编写生成对话框的JS代码，3.在后台视图列脚本中实现悬停弹框功能。详细示例参考：http://download.youkuaiyun.com/detail/lejuo/3644093。

原本视图界面下，都只是看数据，不能利用鼠标弹出框显示数据，怎么解决，想到js鼠标悬停对话框功能。于是马上做：

1.将样式代码写在portal/gray/resource/css/style.css文件中

/*添加的javascript悬浮窗口*/
.tip{
	width:350px;
	border:5px solid #ddd;
	padding:8px;
	background:#EEE9BF;
	color:#030303;
	font:12px/1.8 arial;
}

2.将生成js窗体的代码写在script/list.js文件中

//javascript平台弹出悬浮窗口
var tip = {
                $: function(ele) {
                    if (typeof(ele) == "object") return ele;
                    else if (typeof(ele) == "string" || typeof(ele) == "number") return document.getElementById(ele.toString());
                    return null;
                },
                mousePos: function(e) {
                    var x, y;
                    var e = e || window.event;
                    return {
                        x: e.clientX + document.documentElement.scrollLeft,
                        y: e.clientY + document.documentElement.scrollTop
                    };
                },
                start: function(obj) {
                    var self = this;
                    var t = self.$("elementTips");
                    obj.onmousemove = function(e) {
                        var mouse = self.mousePos(e);
                        t.style.left = mouse.x + 20 + 'px';
                        t.style.top = mouse.y + 20 + 'px';
                        t.innerHTML = obj.getAttribute("tips");
                        t.style.display = '';
                    };
                    obj.onmouseout = function() {
                        t.style.display = 'none';
                    };
                }
            }

3.将实现鼠标悬停的弹出对话框的代码写在后台视图的列脚本中。

<p title="弹出窗" target="_blank" onmouseover="tip.start(this)" tips="弹出窗的消息内容">
	弹出测试</p>
<div id="mm" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>

4.ok了。

详细参考例子：

http://download.youkuaiyun.com/detail/lejuo/3644093