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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
Mar 07 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
Vue全家桶入门基础教程
May 14 Vue.js
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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
多重?l件?合查?(二)
2006/10/09 PHP
PHP会话控制实例分析
2016/12/24 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
JQuery从头学起第三讲
2010/07/06 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
Vue生命周期示例详解
2017/04/12 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
python-opencv颜色提取分割方法
2018/12/08 Python
django admin 自定义替换change页面模板的方法
2019/08/23 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
房产转让协议书
2014/04/11 职场文书
活动总结书
2014/05/08 职场文书
党的群众路线教育实践活动个人对照检查材料(教师)
2014/11/04 职场文书
党员个人年度总结
2015/02/14 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
Python简易开发之制作计算器
2022/04/28 Python