背景變灰不能操作的效果

Posted on 2016-10-02 Edited on 2023-11-24 In 隨手文章 Views: Disqus:

重點有三個元素參與，一是背景文章、二是灰色遮罩、三是跳出的選單。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <style>
        body {
            margin: 0;
        }

        #bgWrapper {
            position: absolute;
            text-align: center;
            margin: 0 25%;
        }

        #mask {
            display: none;
            background-color: #111;
            width: 100%;
            height: 100%;
            opacity: 0.6;
            position: fixed;
        }

        #windows {
            display: none;
            width: 50%;
            height: 50%;
            position: fixed;
            border: 1px solid;
            opacity: 1;
            background-color: #ffffff;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="bgWrapper">
        <div id="bgDiv">
            Jailbreaking your iPhone is something Apple already frowns upon. Unfortunately for a Tokyo man, he found out the hard way that selling these modified phones draws the ire of authorities, too, reports The Japan Times.

            Hoping to make some money on the side, 24-year-old Tokyo resident Daisuke Ikeda had an entrepreneurial scent around him, thanks to him allegedly selling five jailbroken iPhones between March 26 and May 23. Ikeda reportedly made around a combined $1,200 in profit from the five units, with all five including a cracked version of Monster Strike, a popular mobile game that was banned from Apple’s App Store at one point before being reinstated.

            However, when authorities arrested Ikeda, it seems as if they knew that he sold many more than just five jailbroken iPhones. More specifically, Ikeda is believed to have sold around 200 units over the course of a year, allowing him to rake in $49,243 in profit, according to an unnamed investigative source.
            Jailbreaking your iPhone is something Apple already frowns upon. Unfortunately for a Tokyo man, he found out the hard way that selling these modified phones draws the ire of authorities, too, reports The Japan Times.

            Hoping to make some money on the side, 24-year-old Tokyo resident Daisuke Ikeda had an entrepreneurial scent around him, thanks to him allegedly selling five jailbroken iPhones between March 26 and May 23. Ikeda reportedly made around a combined $1,200 in profit from the five units, with all five including a cracked version of Monster Strike, a popular mobile game that was banned from Apple’s App Store at one point before being reinstated.

            However, when authorities arrested Ikeda, it seems as if they knew that he sold many more than just five jailbroken iPhones. More specifically, Ikeda is believed to have sold around 200 units over the course of a year, allowing him to rake in $49,243 in profit, according to an unnamed investigative source.
        </div>
        <button id="trigger">trigger</button>
    </div>

    <div id="mask"></div>

    <div id="windows">
        <p>I'am always on top</p>
        <button id="close">close</button>
    </div>

    <script>
        $("#trigger").click(function () {
            $("#windows").css("display", "block");
            $("#mask").css("display", "block");
        });

        $("#close").click(function () {
            $("#windows").css("display", "none");
            $("#mask").css("display", "none");
        });
    </script>
</body>
</html>