DIV弹窗与登录层实现-优快云博客

div弹出层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LIGHTBOX EXAMPLE</title>
    <style>
     
        .white_content
        {
            display: none;
            position:fixed;
            <!--这样就可以随着鼠标 动了-->
            top: 25%;
            left: 25%;
            width: 50%;
            border: 12px solid #D6E9F1;
            z-index: 1002;
        }
        .black_overlay
        {
            display: none;
            position:fixed;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: #f5f5f5;
            z-index: 1001;
            -moz-opacity: 0.4;
            opacity: .80;
            filter: alpha(opacity=80);
        }
        .close
        {
            float: right;
            clear: both;
            width: 100%;
            text-align: right;
            margin: 0 0 6px 0;
        }
        .close a
        {
            color: #333;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
        }
        .con
        {
            text-indent: 1.5pc;
            line-height: 21px;
        }
    </style>

    <script type="text/javascript">
        function show(tag) {
            var light = document.getElementById(tag);
            var fade = document.getElementById('fade');
            light.style.display = 'block';
            fade.style.display = 'block';
        }
        function hide(tag) {
            var light = document.getElementById(tag);
            var fade = document.getElementById('fade');
            light.style.display = 'none';
            fade.style.display = 'none';


            //也可以这样删除 div
            // $('#fade').remove();
        }
    </script>

</head>
<body>
    <a href="javascript:void(0)" οnclick="show('light')">打开</a>
    <div id="light" class="white_content">
        <div class="close">
            <a href="javascript:void(0)" οnclick="hide('light')">关闭</a></div>
        <div>
这里是弹出div 要显示的内容
        </div>
    </div>
    <div id="fade" class="black_overlay">
这个div相当于一个黑布，把不想显示的 遮去，好显示弹出的div
    </div>
</body>
</html>

2.留言系统，当验证后用户没有登录，弹出登录层，登录完，登录层消失

  //查看是否登录
        function CheckLogin() {
            var txt = document.getElementById("txt");
            if (txt.value == '有什么想对他说的请在此留言！') txt.value = '';

            try {
                $.ajax({
                    type: "POST",
                    url: "/hall/IsLogin",
                    async: false,
                    success: function(msg) {
                        if (msg.toLowerCase() == "false") {
                            //no login to login
                            LoadLoginPage();
                        }
                    }
                });
            }
            catch (e) { }
        }
        //加载登录页面
        function LoadLoginPage() {
            try {
                $.ajax({
                    type: "Get",
                    url: "/hall/ToLogin",
                    async: false,
                    success: function(msg) {
                      //留言页面的 body id是su_body,把登录页面 加载到 body里
                        $('#su_body').append(msg);
                    }
                });
            }
            catch (e) { }
        }

        //传入obj div的id ，隐藏div
        function ColseLoginDiv(obj) {
//删除登录div
            $('#login').remove();
        }

登录页面和上面静态页的原理一样，

 <div id="login">
        <div id="tologin" class="white_content">
            <div class="close">
                <a href="javascript:void(0)" οnclick="ColseLoginDiv('tologin')">关闭</a></div>
            <%using (Html.BeginForm())
              {
            %>
                        <input id="login" class="denglu_button" type="submit" value="登陆" />
                    </td>
                    <td>
                        <input id="Submit1" class="denglu_button" type="button" value="取消" οnclick="ColseLoginDiv('tologin')" />
      
            <%
                } %>
        </div>
        <div id="fade" class="black_overlay">用来遮盖
        </div>
    </div>

转载于:https://www.cnblogs.com/nanxiaoxiang/archive/2013/03/11/2954286.html