js弹出窗口简单实现代码


Posted in Javascript onMarch 22, 2017

本文实例为大家分享了js弹出窗口展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    body{
      /*margin: 0;*/
    }
    #div1{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div id="div1" onmouseover="getInfo(this)" onmouseout="this.innerHTML=''">

</div>
<button onclick="getInfo()">获取div信息</button>

<hr/>
<a href="111.html" rel="external nofollow" target="_blank">我是超链接</a>
<br/><br/>
<button onclick="myopen1()">新窗口111111111</button>
<button onclick="myopen2()">新窗口222222222</button>
<button onclick="myopen3()">新窗口333333333</button>

<hr/>
<button onclick="myclose()">关掉子窗口</button>

<script>
  var mywin;
  function myclose(){
    if(mywin)
      mywin.close();
  }
  function myopen3(){
    mywin = window.open('333.html', 'news', 'resizable=no');
  }
  function myopen2(){
    mywin = window.open('222.html', 'news', 'resizable=no');
  }
  function myopen1(){
    mywin = window.open('111.html', 'news', 'resizable=no');
  }
  function getInfo(obj){
//    var div1 = document.getElementById('div1');

    obj.innerHTML = obj.offsetWidth+',,'+obj.offsetHeight;
    obj.innerHTML += '<br>'+obj.offsetLeft+',,'+obj.offsetTop;
    // offsetXXX 只能读取不能赋值修改
    obj.offsetWidth = obj.offsetWidth+100;
    // 下面的属性已经不能用了
//    obj.innerHTML += '<br>'+obj.innerWidth+',,'+obj.innerHeight;
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
Some tips of wmi scripting in jscript (1)
Apr 03 Javascript
语义化 H1 标签
Jan 14 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
Sep 08 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
js实现自动图片轮播代码
Mar 22 #Javascript
JavaScript中清空数组的三种方式
Mar 22 #Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 #Javascript
tab栏切换原理
Mar 22 #Javascript
js中的DOM模拟购物车功能
Mar 22 #Javascript
js+canvas实现动态吃豆人效果
Mar 22 #Javascript
JavaScript实现星星等级评价功能
Mar 22 #Javascript
You might like
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
vue接入腾讯防水墙代码
2019/05/07 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python轮询机制控制led实例
2020/05/03 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
读书演讲主持词
2014/03/18 职场文书
网站客服岗位职责
2014/04/05 职场文书
岗位说明书标准范本
2014/07/30 职场文书
工作检讨书范文
2015/01/23 职场文书
天河观后感
2015/06/11 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis
MySQL普通表如何转换成分区表
2022/05/30 MySQL
SpringBoot前端后端分离之Nginx服务器下载安装过程
2022/08/14 Servers