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 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JavaScript ES6箭头函数使用指南
Dec 30 Javascript
微信小程序非跳转式组件授权登录的方法示例
May 22 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
Nov 26 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
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP获取表单textarea数据中的换行问题
2010/09/10 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
python类和继承用法实例
2015/07/07 Python
python从入门到精通(DAY 1)
2015/12/20 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
Free People中国官网:波西米亚风格女装服饰
2016/08/30 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
英文自我鉴定
2013/12/10 职场文书
通用求职信范文模板分享
2013/12/27 职场文书
学校教学管理制度
2015/08/06 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
spring cloud 配置中心native配置方式
2021/09/25 Java/Android
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA