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 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
Javascript 实现TreeView CheckBox全选效果
Jan 11 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
jQuery代码性能优化的10种方法
Jun 21 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
canvas时钟效果
Feb 16 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
浅谈Node异步编程的机制
Oct 18 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
JS原型对象操作实例分析
Jun 06 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极大的增强功能和性能
2006/10/09 PHP
ie6 动态缩略图不显示的原因
2009/06/21 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
JavaScript使用readAsDataURL读取图像文件
2017/05/10 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python爬虫辅助利器PyQuery模块的安装使用攻略
2016/04/24 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
致Python初学者 Anaconda入门使用指南完整版
2018/04/05 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
Python json格式化打印实现过程解析
2020/07/21 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
招聘单位介绍信
2014/01/14 职场文书
对公司合理化的建议书
2014/03/12 职场文书
毕业生求职信范文
2014/06/29 职场文书
2014年设计师工作总结
2014/11/25 职场文书
男方婚前保证书
2015/02/28 职场文书
李强为自己工作观后感
2015/06/11 职场文书
2016年村干部公开承诺书(公开承诺事项)
2016/03/25 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB