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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 Javascript
JavaScript易错知识点整理
Dec 05 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue3.0实现插件封装
Dec 14 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判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
Angular CLI 安装和使用教程
2017/09/13 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
2018/04/23 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
Python的Flask框架中web表单的教程
2015/04/20 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
Python for循环及基础用法详解
2019/11/08 Python
Django 实现图片上传和下载功能
2020/12/31 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
儿科护理实习自我鉴定
2013/09/19 职场文书
安全事故检讨书
2014/01/18 职场文书
微观物理专业自荐信
2014/01/26 职场文书
致百米运动员广播稿
2014/01/29 职场文书
搞笑爱情保证书
2014/04/29 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
活动总结格式
2014/08/30 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
晚会开幕词
2015/01/28 职场文书
导师工作推荐信
2015/03/27 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
Python 多线程处理任务实例
2021/11/07 Python
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL