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.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 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
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
js 幻灯片的实现
2011/12/06 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
js图片处理示例代码
2014/05/12 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
python ubplot使用方法解析
2020/01/10 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
教师研修随笔感言
2014/01/23 职场文书
端午节活动总结报告
2015/02/11 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang