生成淘宝登录页面（实录二）

最新推荐文章于 2022-04-12 15:37:15 发布

churanlu1875

最新推荐文章于 2022-04-12 15:37:15 发布

阅读量247

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3427060/blog/1475502

版权

javascript学习实例集锦，淘宝网-迷你登录 http://www.fgm.cc/learn/taobao-login/

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>My Todo App</title>

    <script>
    function constructor(){
        this.wap = document.createElement('div')
        this.back = document.createElement('div')
        this.closebtn = document.createElement('a')
        this.oIframe = document.createElement('iframe')
    }
    constructor.prototype = {
        
        init: function(){
            var that = this;
            this.wap.className = 'wapclass';
            this.back.className = 'backclass'
            this.closebtn.className = 'closeclass'
            this.closebtn.href = "javascript:;";
            this.wap.id = 'wapid';
            this.oIframe.src = 'https://login.taobao.com/member/login.jhtml?style=mini&redirectURL=" + redirectURL + "&full_redirect=true';
            this.oIframe.width = '412px';
            this.oIframe.height = '300px';
            this.oIframe.sscrolling = 'no';
            this.oIframe.frameBorder = ' v';
            document.body.appendChild(this.wap);
            document.body.appendChild(this.back);
            this.back.appendChild(this.closebtn);
            this.back.appendChild(this.oIframe);

            this.closebtn.onclick = function(){
                that.close();
            }
        },

        open: function(){
            this.wap.style.display = 'block';
            this.back.style.display = 'block';
        },

        close: function() {
            this.wap.style.display = 'none';
            this.back.style.display = 'none';
            //this.back.style.width = '200px';
        }
    }

    window.onload = function() { 
        var showwapid = document.getElementById('showwap');

        var constructor2 = new constructor();
        showwapid.onclick = function() {
            var iswap = document.getElementById('wapid')
            iswap ? constructor2.open() : constructor2.init(); 
        }

    }
    </script>
</head>
<body>
    <button id='showwap'>点我</button>

</body>
    <style>
    .wapclass{
        position: fixed;
        bottom: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        width: 100%;
        background: #1b191a;
        opacity: 0.6;
        z-index: 998;
    }
    .backclass{
        position: fixed;
        bottom: 0px;
        top: 0px;
        left: 0px;
        right: 0px;
        width: 412px;
        height: 300px;
        background: #fff;
        z-index: 999;
        margin: auto;
    }
    .closeclass{
        position: absolute;
        top: 10px;
        right: 10px;
        background: pink;
        width: 20px;
        height: 18px;
        background: url(http://img03.taobaocdn.com/tps/i3/T1HQezXcXnXXXXXXXX-123-400.png) 0 -81px;
    }
    </style>
</html>

转载于:https://my.oschina.net/u/3427060/blog/1475502

churanlu1875

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
生成淘宝登录页面（实录二）

javascript学习实例集锦，淘宝网-迷你登录http://www.fgm.cc/learn/taobao-login/ <html lang="zh"><head> <meta charset="UTF-8"> <titl...
复制链接

扫一扫