js+div悬浮框

最新推荐文章于 2023-10-08 22:25:17 发布
最新推荐文章于 2023-10-08 22:25:17 发布
阅读量1.6k 收藏
点赞数
分类专栏： JAVASCRIPT DIV 文章标签： JAVASCRIPT DIV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanhuawei/article/details/47127345
版权

<html>
<head>
    <title>弹出窗口(可拖动，背景灰色透明)</title>
    <link href="http://localhost:12964/Content/bootstrap.css" rel="stylesheet" />
    <script src="http://localhost:12964/Scripts/jquery-1.10.2.js"></script>
    <script src="http://localhost:12964/Scripts/bootstrap.js"></script>
    <script src="http://localhost:12964/Scripts/Channel/popover.ladder.js"></script>
    <script type="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/

 

        function AlertMsg(title, content) {
            var ev = window.event;
            var mousePos = mouseCoords(ev);

            console.log("AlertMsg")
        if (document.getElementById("msgdiv") != null) return;
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = "";
//弹出窗口设置
msgw = 300;   //窗口宽度
msgh = 150;   //窗口高度
msgbg = "#FFFF66";    //内容背景
msgcolor = "#000";   //内容颜色
bordercolor = "#D9DA97"; //边框颜色
titlecolor = "#FFF"; //标题颜色
titlebg = "#369";   //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#777";
maskObj.style.filter = "Alpha(opacity=30);";
maskObj.style.opacity = "0.3";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
//创建弹出窗口
var msgObj = document.createElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
msgObj.style.top = mousePos.y + "px";
msgObj.style.left = mousePos.x + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height = msgh + "px";
msgObj.style.fontSize = "12px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//创建内容
var bodyObj = document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = content;

//生成窗口
//document.body.appendChild(maskObj);
document.body.appendChild(msgObj);
document.getElementById("msgdiv").appendChild(bodyObj);
}

    function CloseMsg() {
        console.log("CloseMsg")
//移除对象
var bodyObj = document.getElementById("msgbody");
var msgObj = document.getElementById("msgdiv");
var maskObj = document.getElementById("maskdiv");
if(null!=bodyObj&&null!=msgObj){
msgObj.removeChild(bodyObj);
}
if(null!=msgObj){
document.body.removeChild(msgObj);
}
if(null!=maskObj){
document.body.removeChild(maskObj);
}
}

    function mouseCoords(ev) {
        if (ev.pageX || ev.pageY) {
            return { x: ev.pageX, y: ev.pageY };
        }
        return {
            x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y: ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }
    </script>
</head>
<body>
    <div style="background-color:red" οnmοusemοve="AlertMsg('', '<div><div class=\'popUpTest\'></div>')"  οnmοuseοut="    CloseMsg()">点我试试!</div>
</body>
</html>

xuejin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动DIV悬浮框
weixin_39482360的博客
10-28 965
1、首先添加CSS样式 .ui-dialog{ width: 450px;height: 180px; z-index: 9000; border: 1px solid #D5D5D5;background: #fff; overflow-y: auto; } ...
jquery 鼠标移入显示悬浮框
09-10
悬浮框通常用一个绝对定位的元素来实现，可以是`<div>`或任何其他HTML元素： ```javascript function showTooltip(tooltipText) { var tooltip = $('<div class="tooltip"></div>'); tooltip.text(tooltipText);...
悬浮DIV层(javascript实现)
06-24
当页面滚动条滚动到某个高度时,div开始悬浮,当页面滚动到底部时停止浮动,高度记录为最后的浮动高度.
js 3行代码，最简易实现div效果悬浮
weixin_30586257的博客
07-13 422
简易实现浮动效果的首要因素是：获取滚动条距离浏览器顶部的距离，下面直接贴代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js实现div效果悬浮</title> <style type="text/css...
div悬浮提示框
sahalacn的专栏
07-03 1145
var tip = {         $ : function(ele) {             if (typeof (ele) == "object")                 return ele;             else if (typeof (ele) == "string" || typeof (ele) == "number")
javascript:浮动div，可拖拽div,遮罩层(div和iframe实现)
小郭书房
07-29 282
在网页中，经常需要标题里提到的几种效果，实现比较简单，这里总结一下（IE测试通过），以备日后再用。 预备知识：网页中的高和宽 //获取浏览器的宽和高（多种浏览器） function getNavWidthandHeightInfo() { var s = ""; s += " 网页可见区域宽："+ document.body.clientWidth; s ...
Js 漂浮层,悬浮 div
09-10 1025
放些文字或图片    
js+div实现图片滚动效果代码
10-26
本文将详细介绍如何通过结合JavaScript和DIV标签实现横向和纵向的图片滚动效果。 首先，我们来分析横向滚动效果的实现。横向滚动效果是通过在DIV标签内水平放置图片链接，然后通过JavaScript控制这个DIV的内容（即...
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
10-22
本篇文章将介绍如何使用JavaScript和CSS实现一个鼠标经过时弹出DIV框的效果，并在弹出时添加缓冲动画和渐变效果。 首先，我们来理解一下这个效果实现的核心概念。当鼠标悬停在页面的某个区域上时，通过CSS和...
JavaScript+div 半透明弹出层
01-24
JavaScript+div 半透明弹出层,function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层 var newDiv...
javascript显示div漂浮
09-11
鼠标移到图片上，显示跟随鼠标移动的大图片
JS实现悬浮导航(实用)
05-05
浏览网页时，滚动鼠标拉动网页后，导航不消失，悬浮于浏览器上。用户体验很好，实用性很强，很多知名网站在使用，前端学习者必会的技能。
CSS实现的div悬浮框并且兼容IE6的样式
12-13
复制代码代码如下: <!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>CSS固定定位</title> <style type=”text/css”>
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
10-23
主要介绍了JS实现弹出浮动窗口,可支持鼠标拖动和关闭的功能,界面美观大方,涉及javascript动态创建对话框的相关技巧,需要的朋友可以参考下
jquery.实现div悬浮
10-30
div悬浮实例
CSS浮动
weixin_30433075的博客
12-29 76
一、 定义 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 二、 浮动与不浮动 浮动与不浮动有很多的区别，但主要的区别是不浮动的框是由上往下独占一行的，而浮动的框是紧靠着排列的。上（...
js保持div悬浮，不随页面向下滚动而被覆盖
如果可以，我愿争取
08-06 1918
//兼容性1，document.body.scrollTop 和 document.documentElement.scrollTop 兼容性2. style.top的值firefox需要加“px” , ie兼容此px ,无需另外加判断 var stmnBASE = 840; //起始顶部间距（原始值） var stmnActivateSpeed = 1000; //
JS制作DIV悬浮窗与悬浮窗拖拽
adsl4977的博客
03-14 752
　　 　　//-------------------------------------------------------------------这里只是吐槽！~------------------------------------------------------------------ 　　啊哈，这是第一次来博客园里写博客喃。当然也是我的第一篇博客啦= =！很有纪念意义。。...
js 实现浮窗
最新发布
u013028240的专栏
10-08 1665
js 实现浮窗
js固定页面底部悬浮框特效代码
05-15
<div class="floating-box">这是一个底部悬浮框</div> ``` CSS代码： ``` .floating-box { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: #333; color: #fff; text...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值