js 弹出窗口

js-javascript-鼠标悬停弹出大图窗口的源代码 javascript鼠标悬停弹出大图窗口的源代码 阅读详情

<!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=GBK2312" />
<title>无标题文档</title>
<script language="javascript">
var showwin = function(title, msg, w, h){
    var titleheight = "22px"; // 提示窗口标题高度
    var bordercolor = "#666699"; // 提示窗口的边框颜色
    var titlecolor = "#FFFFFF"; // 提示窗口的标题颜色
    var titlebgcolor = "#666699"; // 提示窗口的标题背景色
    var bgcolor = "#FFFFFF"; // 提示内容的背景色
  
    var iWidth = document.documentElement.clientWidth;
    var iHeight = document.documentElement.clientHeight;
    var bgObj = document.createElement("div");
    bgObj.id="bgObjId";
    bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
    document.body.appendChild(bgObj);
  
    var msgObj=document.createElement("div");
    msgObj.id="msgObjId";
    msgObj.style.cssText = "position:absolute;font:11px '宋体';top:"+(iHeight-h)/2+"px;left:"+(iWidth-w) /2+"px;width:"+w+"px;height:"+h+"px;text-align:center;border:1px solid "+bordercolor+";background-color:"+bgcolor+";padding:1px;line-height:22px;z-index:102;";
    document.body.appendChild(msgObj);
  
    var table = document.createElement("table");
    msgObj.appendChild(table);
    table.style.cssText = "margin:0px;border:0px;padding:0px;";
    table.cellSpacing = 0;
    var tr = table.insertRow(-1);
    var titleBar = tr.insertCell(-1);
    titleBar.style.cssText = "width:100%;height:"+titleheight+"px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:"+titlecolor+";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor;
    titleBar.style.paddingLeft = "10px";
    titleBar.innerHTML = title;
    var moveX = 0;
    var moveY = 0;
    var moveTop = 0;
    var moveLeft = 0;
    var moveable = false;
    var docMouseMoveEvent = document.onmousemove;
    var docMouseUpEvent = document.onmouseup;
    titleBar.onmousedown = function() {
        var evt = getEvent();
        moveable = true;
        moveX = evt.clientX;
        moveY = evt.clientY;
        moveTop = parseInt(msgObj.style.top);
        moveLeft = parseInt(msgObj.style.left);
      
        document.onmousemove = function() {
            if (moveable) {
                var evt = getEvent();
                var x = moveLeft + evt.clientX - moveX;
                var y = moveTop + evt.clientY - moveY;
                if ( x > 0 &&( x + w < iWidth) && y > 0 && (y + h < iHeight) ) {
                    msgObj.style.left = x + "px";
                    msgObj.style.top = y + "px";
                }
            }  
        };
        document.onmouseup = function () {
            if (moveable) {
                document.onmousemove = docMouseMoveEvent;
                document.onmouseup = docMouseUpEvent;
                moveable = false;
                moveX = 0;
                moveY = 0;
                moveTop = 0;
                moveLeft = 0;
            }
        };
    }
  
    var closeBtn = tr.insertCell(-1);
    closeBtn.style.cssText = "cursor:pointer; padding:2px;background-color:" + titlebgcolor;
    closeBtn.innerHTML = "<span style='font-size:15pt; color:"+titlecolor+";'>×</span>";
    closeBtn.onclick = function(){
        document.body.removeChild(bgObj);
        document.body.removeChild(msgObj);
    }
    var msgBox = table.insertRow(-1).insertCell(-1);
    msgBox.style.cssText = "font:10pt '宋体';";
    msgBox.colSpan = 2;
  
    var msgs = "<span>账 号:</span><input type='text' id='txtName' style='width: 120px' /><br />"
                +"<span>密 码:</span><input type='password' id='txtPwd' style='width: 120px' /><br />"
                +"<input type='button' value='登录' onclick='getValue(/""+bgObj.id+"/",/""+msgObj.id+"/")' />";
    msgBox.innerHTML = msgs;
  
    // 获得事件Event对象,用于兼容IE和FireFox
    function getEvent() {
        return window.event || arguments.callee.caller.arguments[0];
    }
}
//执行后台 click()
function getValue(bgObjId,msgObjId)
{
    document.getElementById("txtVal").value = "姓名是:" + document.getElementById("txtName").value+",   密码是:"+document.getElementById("txtPwd").value;
    var bgObj = document.getElementById(bgObjId);
    var msgObj = document.getElementById(msgObjId);
  
    document.body.removeChild(bgObj);
    document.body.removeChild(msgObj);
  
    //执行隐藏服务器按钮后台事件
    // document.getElementById("btnOk").click();
}
</script>
</head>
<body>
<input type="button" value="点这里" onclick="showwin('标题','这里是内容',300,200);" />
<input id="txtVal" type="text" value="" style="width: 800px" />
</body>
</html>

JavaScript技巧:实现居中弹出窗口 showPopup()函数用于显示弹出窗口,它通过获取"popupContainer"元素的引用,并将其样式的"display"属性设置为"block",从而使弹出窗口可见。hidePopup()函数用于隐藏弹出窗口,它将"display"属性设置为"none",使弹出窗口不可见。在上述代码中,我们定义了一个名为"popupContainer"的DIV元素,它表示弹出窗口的容器。现在,当用户点击"显示弹出窗口"按钮时,弹出窗口将居中显示在页面中。当用户点击弹出窗口中的"关闭"按钮时,弹出窗口将被隐藏。 阅读详情

相关推荐

JavaScript 弹出窗口实战指南

在本章节中,我们将深入探讨如何构建一个自定义模态对话框。模态对话框(Modal)是一种常用的用户界面设计模式,用于在当前页面中弹出一个浮动窗口,用于显示信息或收集用户输入,而不必离开当前页面。本章将分为两个主要部分:设计思路与规划以及编写基础HTML结构。当着手设计自定义模态对话框时,HTML是构建骨架的基础。首先,我们需要定义一个div元素作为对话框的主容器。接着,使用headersection或article标签来分配对话框的头部和内容区域。<h2>模态框标题</h2>

weixin_42578963的博客 1266

原生JS+layui项目笔记(一)【layer弹出框与form、table】

一、准备文件 1. html文件引入 <script type="text/javascript" src="./layui/layui.js"></script> <script type="text/javascript" src="./xxx/xxxx.js"></script> 2.js文件引入layui的各种组件 layui.use(['jquery',layer','table','form','laytpl','laydate'].

sinat_38011533的博客 1876

js弹出层table运用

js弹出层table运用,可移动框

jtable.js 弹出框自适应高度

小编最近遇到一个问题,久久不得其解,jtable.js中的弹出框如何自定义它的高呢?巧遇公司老员工,解决,这过程也让我得到了不少的心得,先告诉你们代码吧 方法就是改变jtable.js的源码 1.在jquery.jtable.js源码中的_showAddRecordIframe方法中添加代码片段 if (this.options.Height == "auto") { $addRecordForm = $('<iframe id="' + IframeID + '" name="' + Ifr

weixin_43942765的博客 1457

HFSS螺旋线圈的设计与仿真

undefined.全局变量在这里进行设置:Project/Project Properties, browse and setup the global variables.undefined.方程中的局部变量设置:HFSS/Design Properties, browse and setup the local variables。按照下图填写曲线的方程内容:fill the parameters according to the setup in the following picture。

johnboat的专栏 3845

Notion卡顿救星:3分钟搞定DNS优化,手机电脑全平台加速指南

本文针对Notion访问慢和卡顿问题,提供了全平台DNS优化与Hosts文件修改的详细指南。通过更换优质DNS服务器或建立静态IP映射,可有效解决因网络延迟和域名解析导致的加载缓慢,实现手机与电脑端的快速加速,提升Notion使用流畅度。

v6b7n8m9q0的博客 1306

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //====================== JS最常用三种弹出对话框 ========================          //弹出对话框并输出一段提示信息       funct

anhuidelinger的专栏 44万+

MVDR算法: 自适应波束形成在信号处理领域中扮演着重要的角色。本文将介绍MVDR(最小方差无失真响应)算法,并提供相应的Matlab源代码实现。

MVDR算法是一种用于抑制干扰信号并增强感兴趣信号的自适应波束形成算法。它的基本思想是通过对干扰信号进行空间滤波,使其在感兴趣信号方向上的输出功率最小化。这种方法可以提高信号的质量和可辨识度,特别是在存在多个干扰源的复杂环境中。本文将介绍MVDR(最小方差无失真响应)算法,并提供相应的Matlab源代码实现。使用MVDR算法,我们可以通过对观测信号进行波束形成来抑制干扰信号并增强感兴趣信号。以上是MVDR算法的Matlab实现。的每一列代表一个阵列元素的观测信号。表示期望的波束指向,即感兴趣信号的方向。

HackWhisper的博客 1245

【JavaScript】简单实现弹出窗口div

JavaScript实现弹出窗口 思路 总体使用两个div,一个作为底层展示,一个做为弹出窗口; 两个窗口独立进行CSS设计,通过display属性进行设置现实与隐藏,此处建议使用display属性而不是visibility属性,visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间,影响布局; 在js内设计两个onclick事件,分别指定函数,分别为开启弹窗和关闭弹窗。 一、设置两个div <html> <title>弹出窗口</t

Lee的博客 2万+

PTC Creo软件二次开发:使用C++进行Creo二次开发实战

C++是一种静态类型的、编译式的、通用的、大小写敏感的、不规则的编程语言,支持过程化编程、面向对象编程和泛型编程。由Bjarne Stroustrup在贝尔实验室开发,最初作为C语言的增强版出现,后来发展成为一种独立的语言。C++不仅保留了C语言的高效性和灵活性,还引入了类、模板、命名空间等高级特性,使其成为开发复杂系统和软件的理想选择。

kkchenjj的博客 4043

AFSim2.9.0学习笔记 —— 4.1、创建项目,以此项目介绍工作中Wizard使用(红方/蓝方武器平台、阵营、更换图标等,多图详细介绍)

AFSim2.9.0学习笔记 —— 4.1、创建项目,以此项目介绍工作中Wizard使用(红方/蓝方武器平台、阵营、更换图标等,多图详细介绍)

2252

JavaScript 自定义弹出窗口

"按页面条件导出数据还是导出所有的数据"// 获取对话框元素并设置标题和消息。'你确定要删除这条记录吗?// 获取对话框元素并隐藏。

哈 4317

Qt Creator 下载和安装

在线安装程序是一个小型的安装程序,它将在您的计算机上下载和安装 Qt Creator。离线安装程序是一个较大的安装包,您可以将其保存在本地,并在没有网络连接的情况下安装 Qt Creator。在 Qt 官方网站上,您可以找到 Qt Creator 的下载页面。Qt Creator 是一款跨平台的集成开发环境(IDE),用于开发基于 Qt 框架的应用程序。在这一步中,您可以选择是否安装 Qt Creator 的附加组件。一旦您完成了组件的选择,安装程序将开始将 Qt Creator 安装到您的计算机上。

HackLogic的博客 6821

JS弹出窗口方法汇总

弹出窗口 【1、最基本的弹出窗口代码】 其实代码非常简单: <SCRIPT LANGUAGE="javascript">    <!--      window.open ('page.html')    //-->&n...

dev_zyx的博客 6254

silero-vad 训练自己的数据

silero-vad 训练自己的数据

jacke121的专栏 816

基于深度学习的大豆病害检测识别系统:YOLOv10 + UI界面 + 数据集

YOLOv10是一种高效的目标检测算法,能够在保持高精度的同时,提供较快的检测速度。YOLOv10使用了改进的卷积神经网络架构,并在多个计算机视觉任务中表现出色。在本项目中,我们将使用YOLOv10进行大豆病害的检测和分类。本系统利用YOLOv10算法,实现了大豆病害的实时检测和分类。通过结合深度学习和图像处理技术,可以帮助农业领域的专业人员更加高效地识别和诊断大豆病害,提高农作物的生产力与质量。

YOLO 700

html生成小窗口,用JS制作9种弹出小窗口(HTML)

进入许多网站时,有弹出式小窗口,它们五花八门,使我们捉摸不透下面就来介绍用JS制作9种制作弹出小窗口:1、最基本的弹出窗口代码其实代码非常简单:window.open("page.html")-->因为这是一段Javascript代码,所以它们应该放在之间。是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open("pa...

weixin_33464176的博客 8826

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

javascript弹出窗口代码

     【1、最基本的弹出窗口代码】   &lt;SCRIPT LANGUAGE="javascript"&gt;   &lt;!--   window.open ('page.html')   --&gt;   &lt;/SCRIPT&gt;      因为着是一段javascripts代码,所以它们应该放在&lt;SCRIPT LANGUAGE="javascript"&gt;标签和&lt;

weixin_33752045的博客 1万+

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

Javascript实现弹出菜单,弹出窗口

1.在打开网页后弹出一个宽200,高300 的窗口,且在该网页关闭后,弹出的窗口也关闭;2.设计弹出式菜单;3.在状态栏上显示当前时间;4.在一个窗口中输入内容,显示在另一个窗口中。最终实现效果                                             文件index.html的内容Code: >   htm

不积跬步无以至千里,不积小流无以成江海。 5375

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

javascript弹出窗口全掌握

 Response.Write("window.open(CheckOut.aspx,null,height=300,width=400,resizable=no,status=no,toolbar=no,menubar=no,location=no);"); 【1、最基本的弹出窗口代码】 其实代码非常简单:          因为这是一段j

XueJiang's Blog 882

js中php弹出窗口,JS弹出窗口的运用与技巧大全

本文详细介绍了JS弹出窗口的运用,非常具有实用价值,具体一起来看一下把。//关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("window.close();");//关闭,父窗口和子窗口都不弹出对话框,直接关闭this.Response.Write("");this.Response.Write("{top.opener =null;top.close();}");t...

weixin_29053067的博客 883

用javascript父窗口控制只弹出一个子窗口

    近来网上经常流传一些关于如何在父窗口控制只弹出一个子窗口 问题,我查看了一些,大部分都是只能解决部分或者很麻烦,还不算完美。比如有人是实现的这样,使用的是Cookie,以下是例子。主页上做了一个弹出窗口,如何使其只弹出一次,返回主页时不再弹出了。 --------------------------------------------------------------- windo

imstudent1的专栏 1193

JAVASCRIPT弹出窗口DIV层效果代码

在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果。   创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一。传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好——生硬的弹出对话框且伴随着“哐”的一声对用户体验是个很大的挑战;其次,兼容性不够强——有相当多的浏览器屏蔽了这种JS的

javagtcpp的专栏 3389

javascript(js)iframe里的页面调用父窗口js函数的方法或弹出窗口调用父窗口js函数的方法

<br />其实js调用父窗口函数的情况有两种:<br />第一种是常用的iframe:<br />我以子窗口调用父窗口的函数发送到fckeditor编辑器的为例说明,只需简单三行:<br /><SCRIPT language=javascript><br />parent.functioncall();//functioncall为函数<br /></SCRIPT><br />addattach():父页面里的一个js函数,功能是发送内容到编辑器:<br /><br />function addattac

[赣]无言 2964
上一篇: C# 运行时调用dll、dll中对象、对象中方法等
下一篇: 委托 事件 之了解
andycode
博客等级 码龄17年 12粉丝 80原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值