自己写的在jquery mobile当前页弹出层

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title></title>
<link rel="stylesheet"
    href="css/themes/default/jquery.mobile-1.4.5.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
 
<script type="text/javascript">
<!--
    function test() {

        showMask();
        var a = $("<div class='c-mask-conent' > </div>").css({
            "height" : $(window).height() * 0.95,
            "top" : $(document).scrollTop() + $(window).height() * 0.02
        });

        $.mobile.activePage.children(":eq(0)").before(a);
        a
                .html("<div><a href='#' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a' onclick='closeIt();'>Cancel</a></div><div></div>");

        var s = "<pre>1111内容<br>内容<br>内容<bghtr>内容<br>内容<br>  <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> <br><br></pre><a href='#' onclick='closeIt();'> aaaa</a>";
        $("div:eq(1)", a)
                .css("height", a.height() - $("div:eq(0)", a).height()).html(s);
    }
    function setScrollActive(active) {

        if (active) {
            $(document).unbind("scroll", disableScroll);
        } else {
            $(document).bind("scroll", {
                "top" : $(document).scrollTop()
            }, disableScroll);
        }
    }

    function disableScroll(e) {
        $(document).scrollTop(e.data.top);
    }
    function showMask() {
        if ($(".c-mask", $.mobile.activePage).length == 0) {
            $.mobile.activePage.children(":eq(0)").before(
                    "<div class='c-mask'> </div>");
        }
        $(".c-mask", $.mobile.activePage).show();
        setScrollActive(false);
    }
    function hideMask() {
        $(".c-mask", $.mobile.activePage).hide();
        setScrollActive(true);
    }
    function closeIt() {

        $(".c-mask-conent", $.mobile.activePage).hide();
        hideMask();

    }
//-->
</script>
<style type="text/css">
div p {
    word-wrap: break-word !important;
    white-space: normal !important;
}

.c-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: lightgray;
    display: none;
    z-index: 10001;
    opacity: 0.5
}

.c-mask-conent {
    position: absolute;
    left: 5%;
    width: 90%;
    z-index: 10002;
    background: lightblue;
    left: 5%;
    overflow: auto
}

.c-mask-conent>div:first-child {
    height: auto;
    text-align: right;
    background: lightgray;
}

.c-mask-conent>div:last-child {
    background:;
    overflow: auto
}
</style>

相关推荐