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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
浅析从vue源码看观察者模式
Jan 29 Javascript
Vue实现左右菜单联动实现代码
Aug 12 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
微信小程序 Nginx环境配置详细介绍
2017/02/14 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
vue 使用 canvas 实现手写电子签名
2020/03/06 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
2020/12/02 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
安全教育实施方案
2014/03/02 职场文书
个人租房协议书
2014/04/09 职场文书
美术指导助理求职信
2014/04/20 职场文书
4s店活动策划方案
2014/08/25 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
避暑山庄导游词
2015/02/04 职场文书
工作岗位职责范本
2015/02/15 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
解决python3安装pandas出错的问题
2021/05/20 Python