面向对象组件开发一个弹窗

组件是对面向对象的加深应用（开发UI组件，功能组件）将配置参数、方法、事件，三者进行分离

window.onload = function() {var aBtn = document.getElementsByTagName('input');//显示在中间，用默认参数即可aBtn[0].onclick = function() {//alert(1);var d1 = new Dialog();d1.init({ //配置参数iNow: 0,title: '登陆框'});}//显示在右下角的公告栏aBtn[1].onclick = function() {var d1 = new Dialog();d1.init({ //配置参数iNow: 1,w: 100,h: 400,dir: 'right_bottom',title: '公告框'});}//显示在中间，并且有遮罩aBtn[2].onclick = function() {var d1 = new Dialog();d1.init({ //配置参数iNow: 2,w: 400,h: 400,dir: 'center',title: '遮罩框',mask: true});}}function Dialog() { //构造函数this.oDiv = null;this.omask = null;this.setting = { //默认参数w: 300,h: 300,dir: 'center',title: '',mask: false}}Dialog.prototype.json = {}//传入json，函数接受一个参数function extend(obj1, obj2) { //配置参数方法for(var i in obj2) {obj1[i] = obj2[i];}
}Dialog.prototype.init = function(opt) { //构建方法extend(this.setting, opt);//替换默认参数if(this.json[opt.iNow] == undefined) {this.json[opt.iNow] = true;}if(this.json[opt.iNow]) {this.create();this.setData();this.close();if(this.setting.mask) {this.mask();}this.json[opt.iNow] = false;}}Dialog.prototype.create = function() { //构建方法实现创建节点this.oDiv = document.createElement('div');this.oDiv.className = 'login';this.oDiv.innerHTML = '<div class="title"><span>' + this.setting.title + '</span><span class="close">X</span></div><div class="content">内容</div>';document.body.appendChild(this.oDiv);
}Dialog.prototype.setData = function() { //构建方法设置配置参数this.oDiv.style.width = this.setting.w + 'px';this.oDiv.style.height = this.setting.h + 'px';if(this.setting.dir == 'center') {this.oDiv.style.left = (viewWidth() - this.oDiv.offsetWidth) / 2 + 'px';this.oDiv.style.top = (viewHeight() - this.oDiv.offsetHeight) / 2 + 'px';} else if(this.setting.dir == 'right_bottom') {this.oDiv.style.left = (viewWidth() - this.oDiv.offsetWidth) + 'px';this.oDiv.style.top = (viewHeight() - this.oDiv.offsetHeight) + 'px';}
}Dialog.prototype.close = function() { //构建方法：关闭弹窗var _this = this;var oClose = this.oDiv.getElementsByTagName('span')[1];oClose.onclick = function() {document.body.removeChild(_this.oDiv);if(_this.setting.mask) {document.body.removeChild(_this.omask);}_this.json[_this.setting.iNow] = true;}
}Dialog.prototype.mask = function() {this.omask = document.createElement('div');this.omask.className = 'mask';document.body.appendChild(this.omask);this.omask.style.width = viewWidth() + 'px';this.omask.style.height = viewHeight() + 'px';
}function viewWidth() {return document.documentElement.clientWidth;
}function viewHeight() {return document.documentElement.clientHeight;
}

html:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}.login {border: 1px solid #d8d8d8;position: absolute;z-index: 2;}.login .title {height: 40px;background: #d8d8d8;}.login .title .close {float: right;cursor: pointer;}.login .content {background: #fff;}.mask {position: absolute;left: 0;top: 0;z-index: 1;background: rgba(0, 0, 0, 0.6);}</style><script type="text/javascript" src="js/myAlert.js"></script></head><body><input type="button" name="" id="" value="登陆框" /><input type="button" name="" id="" value="公告框" /><input type="button" name="" id="" value="遮罩框" /><!--<div class="login"><div class="title"><span>登陆框</span><span class="close">X</span></div><div class="content">内容</div></div>--><!--<div class="mask"></div>--></body></html>

转载于:https://www.cnblogs.com/rlann/p/7111445.html

面向对象组件开发一个弹窗相关推荐

python使用面向对象思想开发一个人机对战的猜拳游戏（石头剪刀布）
使用面向对象思想开发一个人机对战的猜拳游戏(石头剪刀布) import random class Role: def init(self, name=None, score=0): self.name ...
Python使用面向对象思想开发一个人机对战的猜拳游戏（石头剪刀布）。
[开发该软件的操作系统]:windows10 [软件开发环境/开发工具]:PyCharm [编程语言]:Python [开发目的]:这是老师布置的作业啦~ 供初学者参考学习 [开发者]:江西农业大学2 ...
web前端组件开发之弹窗组件实现
widget 抽象类首先抽象出弹窗组件的一些共有属性和方法. widget抽象类中定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性: this.boundingBox = n ...
学习笔记——使用Unity Network组件开发联机游戏
文章目录前言一.创建玩家预制体二.使用Network组件总结前言使用unity中的Network组件开发一个简单的多人在线游戏 unity版本:2018.4.16 一.创建玩家预制体 1. ...
modal组件 vue_开发一个简单的 Vue 弹窗组件
https://github.com/woai3c/Front-end-articlesgithub.com 一个弹窗组件通常包含两个部分,分别是遮罩层和内容层. 遮罩层是背景层,一般是半透明或不透 ...
js面向对象（三）---组件开发
一.对象的多种表现形式 1.提高对象的复用性 2.如何配置参数和默认参数不知道该怎么描述,就直接上代码吧,下面做了2个例子,重点看整个组件的大体结构用组件的方式做拖拽窗口,你可以狠狠的点击这里进行 ...
如何在cocos2d-x中使用ECS(实体-组件-系统)架构方法开发一个游戏？
引言在我的博客中,我曾经翻译了几篇关于ECS的文章.这些文章都是来自于Game Development网站.如果你对这个架构方式还不是很了解的话,欢迎阅读理解组件-实体-系统和实现组件-实体-系 ...
android桌面小组件开发_快使用Scriptable自己开发一个iPhone小组件吧
最近苹果的 iOS 系统升级到了 iOS 14,这次的更新我比较关注的就是升级的小组件功能,这次更新我们可以将小组件放置在主屏幕中的任何位置,可以让我们更加便捷的查看一些信息,从而省去了还需要打开AP ...
[Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发
通过一个小组件,熟悉 Blazor 服务端组件开发.github:https://github.com/git-net/NBlazors 一.环境搭建 vs2019 16.4, asp.net cor ...
vue 一个组件内多个弹窗_论如何用Vue实现一个弹窗-一个简单的组件实现
前言最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多.然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文 ...

面向对象组件开发一个弹窗

面向对象组件开发一个弹窗相关推荐

最新文章

热门文章