弹窗的组件开发

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.login{ background:white; border:1px #000 solid; position:absolute; left:0; top:0;  z-index:2;}
.title{ height:30px; background:gray; color:white;}
.title .close{ float:right;}
#mark{ background:black; fitler:alpha(opacity=50); opacity:0.5; position:absolute; left:0; top:0; z-index:1;}
</style>
<script>

window.onload = function(){
    var aInput = document.getElementsByTagName(‘input‘);

    aInput[0].onclick = function(){

        var d1 = new Dialog();
        d1.init({   //配置参数
            iNow : 0,
            title : ‘登录‘
        });

    };

    aInput[1].onclick = function(){

        var d1 = new Dialog();
        d1.init({   //配置参数
            iNow : 1,
            w : 100,
            h : 400,
            dir : ‘right‘,
            title : ‘公告‘
        });

    };

    aInput[2].onclick = function(){

        var d1 = new Dialog();
        d1.init({   //配置参数
            iNow : 2,
            mark : true
        });

    };

};

function Dialog(){

    this.oLogin = null;

    this.settings = {   //默认参数
        w : 300,
        h : 300,
        dir : ‘center‘,
        title : ‘‘,
        mark : false
    };

}

Dialog.prototype.json = {};

Dialog.prototype.init = function( opt ){

    extend( this.settings , opt );

    if( this.json[opt.iNow] == undefined ){
        this.json[opt.iNow] = true;
    }

    if(this.json[opt.iNow]){
        this.create();
        this.fnClose();

        if(this.settings.mark){
            this.createMark();
        }

        this.json[opt.iNow] = false;

    }

};

Dialog.prototype.create = function(){

    this.oLogin = document.createElement(‘div‘);
    this.oLogin.className = ‘login‘;
    this.oLogin.innerHTML = ‘<div class="title"><span>‘+ this.settings.title +‘</span><span class="close">X</span></div><div class="content"></div>‘;

    document.body.appendChild( this.oLogin );

    this.setData();
};

Dialog.prototype.setData = function(){

    this.oLogin.style.width = this.settings.w + ‘px‘;
    this.oLogin.style.height = this.settings.h + ‘px‘;

    if( this.settings.dir == ‘center‘ ){
        this.oLogin.style.left =  (viewWidth() - this.oLogin.offsetWidth)/2 + ‘px‘;
        this.oLogin.style.top =  (viewHeight() - this.oLogin.offsetHeight)/2 + ‘px‘;
    }
    else if( this.settings.dir == ‘right‘ ){
        this.oLogin.style.left =  (viewWidth() - this.oLogin.offsetWidth) + ‘px‘;
        this.oLogin.style.top =  (viewHeight() - this.oLogin.offsetHeight) + ‘px‘;
    }

};

Dialog.prototype.fnClose = function(){

    var oClose = this.oLogin.getElementsByTagName(‘span‘)[1];
    var This = this;

    oClose.onclick = function(){

        document.body.removeChild( This.oLogin );

        if(This.settings.mark){
            document.body.removeChild( This.oMark );
        }

        This.json[This.settings.iNow] = true;

    };

};

Dialog.prototype.createMark = function(){

    var oMark = document.createElement(‘div‘);
    oMark.id = ‘mark‘;

    document.body.appendChild( oMark );

    this.oMark = oMark;

    oMark.style.width = viewWidth() + ‘px‘;
    oMark.style.height = viewHeight() + ‘px‘;

};

function extend(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr];
    }
}

function viewWidth(){
    return document.documentElement.clientWidth;
}
function viewHeight(){
    return document.documentElement.clientHeight;
}

</script>
</head>

<body>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">

<!--<div class="login">
    <div class="title">
        <span>标题</span><span class="close">X</span>
    </div>
    <div class="content"></div>
</div>-->
<!--<div id="mark"></div>-->
</body>
</html>
时间: 2024-10-19 15:53:55

弹窗的组件开发的相关文章

组件开发之弹窗-1

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组件开发 弹窗 </title> <style type="text/css"> *{ margin: 0px; padding: 0px; } #box1{ border: 1px solid black; position: absolute; } .head{

js组件开发-移动端地区选择控件mobile-select-area

移动端地区选择控件mobile-select-area 由于之前的[js开源组件开发]js手机联动选择地区仿ios 开源git 很受欢迎,于是我又对其进行了一些优化,包括可选的范围变大了,添加了默认空首地址的功能,也添加了更多api参数,首先我们先来看下这次的效果图. 它的github地址请点击https://github.com/tianxiangbing/mobile-select-area 它的demo演示请点击 http://www.lovewebgames.com/jsmodule/m

Vue组件开发分享

在开始本文之前,你可能需要先了解以下相关内容: Vue.js  一款高性能轻量化的MVVM框架 Webpack  前端模块化代码构建工具 Vue组件介绍 基于vue.js高效的双向数据绑定特性,让我们在开发高可用组件时可以更加专注于数据逻辑开发: 忘记DOM操作,忘记事件绑定,让开发的专注力集中于数据上: 1.定义需要使用的数据及类型 2.在合适的时机更新数据 3.在模板上绑定数据与视图的映射关系 4.开放对外调用接口 代码 https://github.com/xiaoyunchen/vue-

[转]详解C#组件开发的来龙去脉

C#组件开发首先要了解组件的功能,以及组件为什么会存在.在Visual Studio .NET环境下,将会有新形式的C#组件开发. 组件的功能 微软即将发布的 Visual Studio .NET 将使程序开发人员获得一个集成开发环境,它不但为开发传统的 C/C++ 应用程序,而且也为令人振奋的Microsoft .NET 组件提供了丰富的工具.这些以管理代码编写.在通用语言运行时构建的组件向开发人员提供了一个全新的混合开发环境,即象 Microsoft Visual Basic 一样容易,而同

ActiveX组件开发和使用

ActiveX控件的概念  (COM组件的应用) 1 什么是ActiveX控件 基于COM组件技术的,使用与一般控件一样方便.与一般控件的区别是,它可以被任何支持COM标准的计算机程序使用. 2 什么是COM组件 组件实现了某种功能的一些小的二进制文件,通过接口对外提供服务. 一个项目生成一个exe文件 一个项目由 一个或者多个exe文件 + 一个或者多个组件.组件与组件直接通过接口交互.有更好的复用性和可维护性. 3 什么是接口? C  语言 - 接口就是函数 C++语言 - 接口就是公有的成

运用BeautyEye组件开发Swing登录界面Demo

import org.jb2011.lnf.beautyeye.BeautyEyeLNFHelper; import org.jb2011.lnf.beautyeye.ch3_button.BEButtonUI; import org.jb2011.lnf.beautyeye.ch8_toolbar.BEToolBarUI; import java.awt.*; import java.awt.event.MouseEvent; import java.awt.event.MouseListen

拖拽的组件开发

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolut

基于唯一状态的前端组件开发

facebook的react的框架提出了一个基于唯一状态来渲染前端组件的想法.什么是唯一状态,採用唯一状态渲染究竟有什么优点. 希望大家看到这篇文章以后不用不论什么框架也能够写出基于唯一状态渲染的前端组件. 基于唯一状态的组件的开发模式就是组件内部永远仅仅存在一份数据来表示组件的状态,而且更新组件时仅仅仅仅使用这一份数据. 这样的开发模式的优点.主要体如今以下两个方面 降低事件与Dom元素的联系 便于保存和恢复组件的状态 降低事件与Dom元素的联系 我们先来看一段传统开发页面交互逻辑时写的代码:

饿了么基于Vue2.0的通用组件开发之路(分享会记录)

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的 大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,