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 入门基础学习
Mar 10 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
vue element和nuxt的使用技巧分享
Jan 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数组转xml的代码分享
2015/05/14 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
eval的两组性能测试数据
2012/08/17 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
layui分页效果实现代码
2017/05/19 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python读写docx文件的方法
2018/05/08 Python
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
印度民族服装购物网站:BIBA
2019/08/05 全球购物
教师个人剖析材料
2014/02/05 职场文书
《他得的红圈圈最多》教学反思
2014/04/24 职场文书
节约用水演讲稿
2014/05/21 职场文书
工会主席事迹材料
2014/06/03 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
Python使用永中文档转换服务
2022/05/06 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android