JS实现博客前端页面（四） —— 封装弹窗组件

PumpkinDylan 发布于2019-08-22 10:37 / 2821人阅读

摘要：在实现博客前端页面一和实现博客前端页面二中已经实现了对获取元素和样式相关的方法的封装，本文将在实现博客前端页面三的基础上实现弹窗组件封装。

在JS实现博客前端页面（一）和JS实现博客前端页面（二）中已经实现了对获取DOM元素和CSS样式相关的方法的封装，本文将在JS实现博客前端页面（三）的基础上实现弹窗组件封装。

界面设计

如下图所示，在点击登录按钮后，会弹出“网站登录”的弹窗：
该弹窗组件由一个遮罩层和窗体组成，遮罩可以阻止我们对周围元素的操作，窗体水平垂直居中，窗体内部是一个登录表单，点击右上角的关闭按钮时整个弹框组件消失。

搭建HTML页面

在之前的html代码中，创建id="mask"的遮罩层和id="loginBox"的窗体




    
    Document
    
    
    
    


    
        
        个人中心
            
                设置
                换肤
                帮助
                退出
                
         
        登录
    
 
    
    
    
        
        密 码：
        
        注册新用户 | 忘记密码？

设置CSS样式

在之前的CSS代码中，加入id="mask"的遮罩层和id="loginBox"的窗体的样式

#mask{//遮罩层
    position: absolute;
    z-index: 999;
    top:0;
    left: 0;
    width: 100%;
    height: 100%; 
    background: #000;
    filter: alpha(Opacity=30);
    opacity: .2;
    display: none; 

}
#loginBox{//窗体
    position: absolute;
    z-index: 1000;
    width: 350px;
    height: 250px;
    border: 1px solid #ccc;
    background-color: #fff;
    display: none; 
}
#loginBox h2{
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    letter-spacing:1px;
    color: #666;
    background: url(../images/login_header.png) repeat-x;
    margin:0;
    padding:0;
    border-bottom: 1px solid #ccc;
    margin:0 0 20px 0;
}
#loginBox h2 img{
    display: block;
    float: right;
    position: relative;
    top:10px;
    right: 10px;
    cursor: pointer;

}
#loginBox .user,#loginBox .pass{
    font-size: 14px;
    color: #666;
    padding: 5px 0;
    text-align: center;
}
#loginBox input.text{
    width:200px;
    height: 25px;
    font-size: 14px;
    border: 1px solid #ccc;
    background-color: #fff;

}
#loginBox .button{
    text-align: center;
    padding: 10px 0;

}
#loginBox input.submit{
    width: 107px;
    height: 30px;
    background: url(../images/login_button.png) no-repeat;
    border: none;
    cursor: pointer;
} 
#loginBox .other{
    text-align: right;
    padding:15px 10px;
    font-size: 14px;
    color: #666;
}

设置效果

设置窗体水平垂直居中

Base.prototype.center = function(width,height){
    //将loginBox 设置为绝对定位
    //将浏览器窗口的高度-窗体自身的高度后除以2后的值设置为top
    //将浏览器窗口的宽度-窗体自身的宽度后除以2后的值设置为left
    var top=(window.InnerHeight - height)/2 + "px";
    var left=(window.InnerWidth - width)/2 + "px";
    for (var i=0;i
浏览器窗口改变大小时触发居中
//触发浏览器窗口事件
Base.prototype.resize = function(fn){ 
     window.onresize = fn;
     return this;
}

前台调用
window.onload = function () {
    //登录弹框
    var mask = $().getId("mask");//获取遮罩层
    var loginBox=$().getId("loginBox");//获取窗体
    loginBox.center(350,250);//设置船体居中
    //浏览器窗口改变时依然居中
    $().resize(function(){
        loginBox.center(350,250);

    });
    //默认弹窗隐藏，点击登录按钮时显示弹窗
    $().getClass("login").click(function() {
         /* Act on the event */
         loginBox.show();
         mask.show();
     });
    //点击关闭按钮时隐藏弹窗
     $().getClass("close").click(function() {//点击窗体关闭按钮，
         /* Act on the event */
         loginBox.hide();
         mask.hide();
     }); 

};

GPU云服务器云服务器前端js 弹窗 js实现视频弹窗 js实现弹窗文本框、 js实现页面表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90962.html

JS实现博客前端页面（五） —— 封装弹窗拖拽事件

摘要：在实现博客前端页面四中已经实现了对弹窗组件的封装，现在我们想要在浏览器窗口内可以对弹窗进行拖拽移动，就需要封装拖拽事件。在JS实现博客前端页面（四）中已经实现了对弹窗组件的封装，现在我们想要在浏览器窗口内可以对弹窗进行拖拽移动，就需要封装拖拽事件。拖拽的原理首先我们需要了解拖拽的原理，大致分为如下几个步骤：将鼠标移动到需要拖拽的物体上，按下鼠标，触发onmousedown事件...

mozillazg 2019-08-22 10:38 评论0 收藏0
一个基于Vue.js+Mongodb+Node.js的博客内容管理系统

摘要：三更新内容在原来项目的基础上，做了如下更新数据库重新设计，改成以用户分组的数据库结构应数据库改动，所有接口重新设计，并统一采用和网易立马理财一致的接口风格删除原来游客模式，增加登录注册功能，支持弹窗登录。这个项目最初其实是fork别人的项目。当初想接触下mongodb数据库，找个例子学习下，后来改着改着就面目全非了。后台和数据库重构，前端增加了登录注册功能，仅保留了博客设置页面，但是...

wh469012917 2019-08-26 11:46 评论0 收藏0
一个基于Angular+Ionic+Phonegap的混合APP实战

摘要：有二维码扫描功能，还做了类似消息可拖拽效果，上拉下拉刷新，轮播图组件。特别适合用于基于模式的移动应用程序开发。简介是一个用基于，和的，创建移动跨平台移动应用程序的快速开发平台。这个项目做得比较早，当时是基于ionic1和angular1做的。做了四个tabs的app，首页模仿携程首页，第二页主要是phonegap调用手机核心功能，第三页模仿微信和qq聊天页，第四页模仿一般手机的表单设...

孙淑建 2019-08-26 11:46 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0