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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
js实现简单选项卡制作
Aug 05 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笔记 字符串处理
2010/10/19 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP常用特殊运算符号和函数总结(php新手入门必看)
2013/02/02 PHP
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
js 发布订阅模式的实例讲解
2017/09/10 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Python实现配置文件备份的方法
2015/07/30 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Python中使用socks5设置全局代理的方法示例
2020/04/15 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
师范毕业生求职自荐信
2013/09/25 职场文书
大专生工程监理求职信
2013/10/04 职场文书
50岁生日感言
2014/01/23 职场文书
离婚协议书范文
2015/01/26 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
热爱劳动主题班会
2015/08/14 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android