JAVASCRIPT实现弹出框_html/css_WEB-ITnose
Javascript实现弹出框
作者 :towaywu
2016-02-19 08:57:50.0
22 浏览
类别 :编程语言 HTML/CSS/JAVASCRIPT 前端编程
弹出框在页面中是不可缺少的一部分. 我们今天来实现简单的弹出框效果.
首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分.
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> body, div{ padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } a { text-decoration: none; } .pop { border-radius: 5px; background-color: #fff; border: #eee 1px solid; position: absolute; width: 350px; left: 35%; top: 25%; } .pop-title { background-image: linear-gradient(#eee,#efefef); position: relative; cursor: pointer; } .pop-title h3,.pop-title a{ display: inline-block; } .pop-title h3{ font-size: 14px; margin: 0; padding: 5px; } .pop-title a { position: absolute; top: 5px; right: 5px; } .pop-content { padding: 10px; } </style></head><body> <div> <div> <h3 id="消息">消息</h3> <a href="javascript:;">X</a> </div> <div> 弹出框已显示 </div> <div></div> </div></body></html>弹出框,在头部按下的时候,开启移动模式,在头部松开的时候就禁止移动.其实就这么一句的意思. 当然逻辑也是比较简单的.
这里我们就可能想到了几个变量,移动的X,Y坐标,移动的开关和禁止. 然后就是给title加入onmousedown 和 onmouseup事件.
onmousedown事件中主要是开启移动.
onmouseup 事件中逻辑主要是关闭移动,禁止移动弹出框.
接着需要移动,而移动需要时在某个范围内移动.这里我们是在body里面移动. 所以给body加入onmousemove事件. 这里面做的事情就是移动弹出框的位置处理.
在这三个事件中主要是配合了CSS中的position属性和JS中的Event事件中的属性的坐标.
var pop = document.getElementsByClassName("pop")[0]; var pop_title = pop.getElementsByClassName("pop-title")[0]; var bd = document.body; var x = 0; var y = 0; var ismove = false; // 是否开启移动 var downx = 30; var downy = 30; pop_title.onmousedown = function (e) { x = e.pageX; y = e.pageY; downx = e.offsetX; downy = e.offsetY; ismove = true; } bd.onmousemove = function (e) { if (ismove) { var cx = e.pageX - downx; var cy = e.pageY - downy; pop.style.left = cx + "px"; pop.style.top = cy + "px"; x = e.x; y = e.y; } e.preventDefault(); } pop_title.onmouseup = function (e) { x = e.pageX; y = e.pageY; ismove = false; console.log("移动完成") }移动弹出框完成后,我们给关闭按钮加入关闭事件.
//关闭 var pop_close = pop.getElementsByClassName("pop-close")[0]; pop_close.onclick = function () { pop.parentNode.removeChild(pop); }好了,简单的弹出框就实现了.同样代码自己可以优化封装,加入其它的功能.兼容性问题可能需要自己去处理一下(IE9以前的版本).
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=205 ,欢迎大家传播与分享.
标签 :javascript教程javascript实例
android项目没有android.jar这个依赖包的解决办法
已经没有数据
towaywu
一个喜欢技术,走在创业路上的屌丝!欢迎一起交流
编程的人微信公众号: bianchengderen
交流QQ群: 186659233
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
