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 相关文章推荐
firefox firebug中文入门教程 脚本之家新年特别版
Jan 02 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
Dec 14 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 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
PHP 配置文件中open_basedir选项作用
2009/07/19 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
webpack4的迁移的使用方法
2018/05/25 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
2019/05/07 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python正则替换字符串函数re.sub用法示例
2017/01/19 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
python实现将汉字保存成文本的方法
2018/11/16 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
英语自荐信常用语句
2013/12/13 职场文书
旷课检讨书大全
2014/01/21 职场文书
暑期社会实践方案
2014/02/05 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
机关出纳岗位职责
2014/04/03 职场文书
一年级学生评语
2014/04/23 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
自主招生英文自荐信
2015/03/25 职场文书
外出学习心得体会范文
2016/01/18 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
Python如何让字典保持有序排列
2022/04/29 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技