jq自定义弹窗

dreamans 发布于2019-08-29 13:09 / 2827人阅读

摘要：需求做一个通用的弹出层提示框。要求位置上下左右居中只需要引入一个文件，调用一下。不要结构，不要样式表。

需求

做一个通用的弹出层提示框。要求：
1.位置上下左右居中,
2.只需要引入一个js文件，调用一下。不要html结构，不要样式表。

解决方案 方法封装

pupopTip.js文件

   /*参数说明：
        * pupW 弹出层宽度 单位可以是px rem, 百分百
        * pupH 弹出层高度
        * pupText 弹出层提示语 可以加html标签
        * pupClose 关闭按钮
        * pupCloseH 关闭按钮高度 用来定位关闭按钮的位置
        * btnText 按钮文字 （可缺省，不加按钮）
        * */
        function pupopTip(pupW,pupH,pupText,pupClose,pupCloseH,btnText) {
            var popup = $("" +
                "" +
                ""+pupText+" " +
                 "");
            $("body").append(popup);
            if(btnText){
                $(".pupopContent").append($(""+btnText+""));

            }
            $(".pupopBox").fadeIn();
            $("body").on("click",".pupClose",function() {
                $(".pupopBox").fadeOut(500,function () {$(this).remove()})
            })
        }

方法调用


购买

效果图

完整代码

私有云专线服务自定义头像自定义网站自定义自定义按钮

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

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

jq自定义弹窗

摘要：需求做一个通用的弹出层提示框。要求位置上下左右居中只需要引入一个文件，调用一下。不要结构，不要样式表。需求做一个通用的弹出层提示框。要求：1.位置上下左右居中,2.只需要引入一个js文件，调用一下。不要html结构，不要样式表。解决方案方法封装 pupopTip.js文件 /*参数说明： * pupW 弹出层宽度单位可以是px rem, 百分百 ...

KavenFan 2019-08-02 15:57 评论0 收藏0
jq自定义弹窗

摘要：需求做一个通用的弹出层提示框。要求位置上下左右居中只需要引入一个文件，调用一下。不要结构，不要样式表。需求做一个通用的弹出层提示框。要求：1.位置上下左右居中,2.只需要引入一个js文件，调用一下。不要html结构，不要样式表。解决方案方法封装 pupopTip.js文件 /*参数说明： * pupW 弹出层宽度单位可以是px rem, 百分百 ...

wzyplus 2019-08-21 11:50 评论0 收藏0
JS面向对象1

摘要：什么是面向对象编程用对象的思想去写代码，就是面向对象编程过程式写法面向对象写法我们一直都在使用对象数组时间面向对象编程的特点抽象抓住核心问题封装只能通过对象来访问方法继承从已有对象上继承出新的对象多态多对象的不同形态对象的组成方法行为操作对什么是面向对象编程用对象的思想去写代码，就是面向对象编程过程式写法面向对象写法我们一直都在使用对象数组Array 时间Dat...

xumenger 2019-08-19 18:15 评论0 收藏0
Vue作为组件在前端项目中的应用&Vue.set 的用法

摘要：业务背景是，在的前端项目中加入作为组件。但随着需要登录的页面的增多，多个页面都需要添加相同的，，以及前端登录逻辑，所以在原先的项目中添加了，将重复的添加的代码加入到了文件中，然后通过方法将对象挂载到某个的节点上。业务背景是，在jq的前端项目中加入Vue作为组件。原本的登录功能是每个页面加一个登录弹窗（手机号+验证码验证登录），然后发ajax请求到后端，登录成功后再进行一些操作。但...

hersion 2019-06-28 18:34 评论0 收藏0
jquery集训营

摘要：不论怎样嵌套，定位父级是谁，都是到达页面边缘的距离。原生的相对于定位的祖先节点的距离。后来添加的照样有事件，这是通过事件委托实现的。如果用普通写法，新添加的是没有事件的。一旦用时，一定要是用的。元素的尺寸 width() height() ★★★★★ innerWidth() innerHeight() ★★★★★ outerWidth() outerHeight() ★★★★★ ...

guqiu 2019-08-19 18:15 评论0 收藏0