zoukankan      html  css  js  c++  java
  • 一个提示窗口的对话框

    /*mask the whole page*/
    
    .mask {
       100%;
      height: 100%;
      background: #000;
      opacity: .3;
      filter:alpha(opacity:30);
      position: absolute;
      left: 0;
      top: 0;
      z-index: 100;
    }
    
    
    /*part1: show*/
    .show {
      position: absolute;
      z-index: 101;
      left: 0;
      top: 0;
      line-height: 100px;
      background: #fff;
      border: 1px solid firebrick;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      text-align: center;
    }
    .show .close {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 20px;
      height: 20px;
       20px;
      line-height: 20px;
    }
    
    
    
    
    
    /*part2 showModal*/
    .showModal{
      position: absolute;
      z-index: 101;
      left: 0;
      top: 0;
       200px;
      height: 100px;
      background: #fff;
      border: 1px solid firebrick;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      text-align: center;
    }
    .showModal .title{
       100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    .showModal input{
      margin-top: 50px;
    }
    
    
    /*part3 showBubble */
    .showBubble{
      position: absolute;
      left: 0;
      top: 20px;
       50px;
      height: 25px;
      line-height: 25px;
      border:1px solid black;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      text-align: center;
    }
    
    .showBubble .tri1{
      position: absolute;
      left: 5px;
      top: -10px;
       0;
      height: 0;
      border:5px solid;
      border-color:transparent transparent black transparent;
    }
    .showBubble .tri2{
      position: absolute;
      left: 5px;
      top: -9px;
       0;
      height: 0;
      border:5px solid;
      border-color:transparent transparent #fff transparent;
    }
    
    #box{
      position: relative;
    }
    

      js部分

    var $= function () {}
    var jq=new $();
    /*mask make a grey mask in window and hidden the scrollbar*/
    $.prototype.mask= function () {
        var mask=document.createElement('div');
        mask.id='mask';
        mask.className='mask';
        document.body.appendChild(mask);
    }
    
    $.prototype.move= function (obj,json,interval) {
        obj.timer&& clearInterval(obj.timer);
        obj.timer=setInterval(function () {
            var stop=true;
            for(var i in json){
                var tar=json[i];
                var cur=parseInt(jq.getcss(obj,i));
                var speed=(tar-cur)/7;
                speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
                if(i=='zIndex'){
                    obj.style[i]=tar;
                } else{
                    if(cur!=tar){
                        stop=false;
                        obj.style[i]=cur+speed+'px';
                    }
                }
            }
            if(stop){
                clearInterval(obj.timer);
                obj.timer=null;
            }
        },interval);
    }
    
    $.prototype.getcss= function (obj,attr) {
        if(window.getComputedStyle){
            return window.getComputedStyle(obj,false)[attr];
        }else{
            return obj.currentStyle[attr];
        }
    }
    
    
    /*dialog can make a dialogBox to show user some info*/
    
    function Dialog(json){
        for(var i in json){
            this[i]=json[i];
        }
    }
    
    Dialog.prototype.show= function () {
    
        var dialogBox=document.createElement('div');
        dialogBox.id='dialogBox';
        var close=document.createElement('span');
    
        close.className='close';
        close.innerHTML='x';
    
        close.onclick=function(){
            document.body.removeChild(dialogBox);
        }
    
        dialogBox.className='show';
        dialogBox.innerHTML=this.content;
    
        document.body.appendChild(dialogBox);
        dialogBox.appendChild(close);
    
        dialogBox.style.left=(document.documentElement.clientWidth)/2+'px';
        dialogBox.style.top=(document.documentElement.clientHeight)/2+'px';
    
        jq.move(dialogBox,{
            'marginLeft':'-100',
            'marginTop':'-50',
            'width':'200',
            'height':'100'
        },10)
    
    }
    
    Dialog.prototype.showModal= function () {
        var dialogBox=document.createElement('div');
        dialogBox.id='dialogBox';
        var input=document.createElement('input');
        var title=document.createElement('div');
    
        input.className='input';
        title.className='title';
        title.innerHTML=this.title;
    
        dialogBox.appendChild(title);
        dialogBox.appendChild(input);
        dialogBox.appendChild(title);
    
        input.style.marginTop='20px';
        dialogBox.appendChild(input);
        dialogBox.className='showModal';
        document.body.appendChild(dialogBox);
    
        //to center the DialogBox
        dialogBox.style.left=(document.documentElement.clientWidth-dialogBox.offsetWidth)/2+'px';
        dialogBox.style.top=(document.documentElement.clientHeight-dialogBox.offsetHeight)/2+'px';
    
    }
    
    
    Dialog.prototype.showBubble= function (dom) {
    
        var tri1=document.createElement('div');
        var tri2=document.createElement('div');
        var msg=document.createElement('div');
        var showBubble=document.createElement('div');
    
        showBubble.id='dialog';
    
        tri1.className='tri1';
        tri2.className='tri2';
        msg.innerHTML='msgbox';
        showBubble.className='showBubble';
    
        showBubble.appendChild(tri1);
        showBubble.appendChild(tri2);
        showBubble.appendChild(msg);
        dom.appendChild(showBubble);
    }
    
    
    Dialog.prototype.close= function () {
        var cancel=document.getElementById('dialogBox');
        document.body.removeChild(cancel);
    }
    var box=new Dialog({
        'title':'title',
        'content':'content'
    });
    
    //show method  box.show();
    //showModal   box.showModal();
    //showBubble  box.showBubble(); need a dom para
    
    box.showBubble(document.getElementById('box'))
  • 相关阅读:
    js数组与字符串的相互转换
    JS怎么把字符串数组转换成整型数组
    element-UI的操作步骤steps每一项添加事件,比如click,hover
    element-UI ,Table组件实现拖拽效果
    修改本机域名localhost为任意你想要的名称
    el-tree 设置目录树中的某个节点为高亮状态
    Akka-CQRS(2)- 安装部署cassandra cluster,ubuntu-16.04.1-LTS and MacOS mojave
    Akka-CQRS(1)- Write-side, Persisting event sources:CQRS存写端操作方式
    Akka-CQRS(0)- 基于akka-cluster的读写分离框架,构建gRPC移动应用后端架构
    Akka-Cluster(6)- Cluster-Sharding:集群分片,分布式交互程序核心方式
  • 原文地址:https://www.cnblogs.com/wz0107/p/4745256.html
Copyright © 2011-2022 走看看