自定義對話框、模態框

時間 2019-12-04

標籤自定義對話框模態简体版

原文原文鏈接

致敬iphoneX的小劉海....javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義模態框</title>
    <style>
        body{
            text-align: center;
        }
       #modalBg{
           position: absolute;
           left: 0;
           top: 0;
           background-color: rgba(0,0,0,0.2);
           width: 100%;
           height: 100%;
           margin: auto;
           display: none;
       }
        #modal{
            min-width: 30%;
            background-color: white;
            border-radius: 5px;
            position: absolute;
        }
       button{
           width: 50%;
           height: 50%;
           background-color: white;
       }
       #modal div{
           width: inherit;
           margin-bottom: 1%;
           padding: 0 3%;
       }
       #modal input{
           float: left;
           width: 81%;
           height: 1.7em;
           outline: none;
           margin: 0;
           padding: 0;
       }
       #modal button{
           position: relative;
           width: 17%;
           outline: none;
           border: none;
           background-color: rgba(129,186,255,1);
           color: white;
           height: 2em;
           margin: 0;
           left: -0.5%;
       }
       #modal button:active{
           box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
           background-color: rgba(129,186,255,0.7);;
       }
       #modal .modal-title{
           width: inherit;
           text-align: center;
           background-color: rgba(129,186,255,1);
           color: white;
           font-size: 1.3em;
           margin-bottom: 4%;
           margin-right: 4.2%;
           margin-left: 3%;
       }
       #modal .modal-title:active{
           background-color: rgba(129,186,255,0.8);
       }
        .modal-Btn{
            margin-top: 8%;
            text-align: right;
        }
       #modal .modal-Btn button{
           width: 5em;
           margin-right: 0.3%;
       }

    </style>
</head>
<body>
<button id="btn">顯示模態框</button>

<div id="modalBg">
    <div draggable="true" id="modal">
        <div class="modal-title">模態框</div>
        <div>
            <input placeholder="請輸入..." type="text" />
            <button>肯定</button>
        </div>
        <div>
            <input placeholder="請輸入..." type="text" />
            <button>肯定</button>
        </div>
        <div>
            <input placeholder="請輸入..." type="text" />
            <button>肯定</button>
        </div>
        <div class="modal-Btn">
            <button>取消</button>
            <button>肯定</button>
        </div>
    </div>
</div>

<script src="../js/jquery-3.2.1.js"></script>
<script>
window.onload = function () {
    $('#btn').click(function () {
        $('#modalBg').css('display','block');
        initModal();
        dragModal();
    });
    $('.modal-Btn button:first-child').click(function () {
        $('#modalBg').css('display','none');
    });
};
    
function initModal() {
    //讓模態框每次啓動的時候都在屏幕正中間！
    var t = 0.5*parseInt($('#modalBg').css('height')) - 0.5*parseInt($('#modal').css('height'));
    var l = 0.5*parseInt($('#modalBg').css('width')) - 0.5*parseInt($('#modal').css('width'));
    $('#modal').css('left',l+'px');
    $('#modal').css('top',t+'px');
}

function dragModal() {
    //讓模態框可拖拽
    var modal = document.getElementById('modal');

    modal.ondragstart=function(e){
        console.log('事件源p3開始拖動');
        offsetX= e.offsetX;
        offsetY= e.offsetY;
        console.log('\n 啓動 offsetX = ' + offsetX);
        console.log('\n 啓動 offsetY = ' + offsetY);
    };

    modal.ondrag=function(e){
        console.log('事件源p3拖動中');
        var x= e.pageX;
        var y= e.pageY;
        console.log(x+'-'+y);
        //drag事件最後一刻，沒法讀取鼠標的座標，pageX和pageY都變爲0
        if(x==0 && y==0){
            return; //不處理拖動最後一刻X和Y都爲0的情形
        }

        x-=offsetX;
        y-=offsetY;

        modal.style.left=x+'px';
        modal.style.top=y+'px';
    };
}


</script>
</body>
</html>

外加贈送一個有彈性的水球，同時也能夠移動。css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水球</title>
    <style>

        #menuBox{
            position: absolute;
            width: 8em;
            height: 8em;
            right: 45%;
            bottom: 45%;
        }
        #menu{
            position: absolute;
            background: radial-gradient(circle at 30px 5px,rgba(142,197,255,0.1), rgba(21,43,79,1));
            border-radius:100%;
            left: 1.5em;
            top: 1em;
            width: 5em;
            height: 5em;
            animation: spin 6s linear infinite;
        }

        #shadow{
            background: radial-gradient(rgba(0,0,0,0.6),rgba(178,178,178,0.6), rgba(255,255,255,0.73),rgba(255,255,255,0.3));
            width: 100%;
            min-height: 0.6em;
            position: absolute;
            top: 8em;
            border-radius: 50%;
            animation: spin 6s linear infinite;

        }

        @keyframes spin{
            0% {
                transform:scaleY(1) scaleX(1.5);
            }

            50%{
                transform:scaleY(1.5) scaleX(1);
            }

            100%{
                transform:scaleY(1)  scaleX(1.5);
            }
        }




    </style>
</head>
<body>

<div draggable="true" id="menuBox">
    <div id="menu"></div>
    <div id="shadow"></div>

</div>
<script>
    var menuBox = document.getElementById('menuBox');
    menuBox.ondragstart=function(e){
        offsetX= e.offsetX;
        offsetY= e.offsetY;
    };
    menuBox.ondrag=function(e){

        var x= e.pageX;
        var y= e.pageY;

        if(x==0 && y==0)
            return;

        x-=offsetX;
        y-=offsetY;

        menuBox.style.left=x+'px';
        menuBox.style.top=y+'px';
    };

</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。