如何创建一个覆盖登录框 - How to create an overlay login box

How to create an overlay login box

我想创建一个包含登录框的覆盖页面，每次用户未登录时自动出现。我正在做我的代码在php。我只是想显示与登录框在它的页面的阴影图像。

听起来你想要一个由$user->loggedin类型的条件语句加载的模态框。听起来你以前使用这些的经验也很有限，所以我建议你从你的模态框的colorbox开始。http://www.jacklmoore.com/colorbox/

如果你想显示一个带阴影的登录图像，你可以这样做

<!-- HTML -->
<div id='loginImgContainer'>
  <div id='loginFilter'></div>
  <img src="images/login.jpg" alt="" id="loginImg">
  <div id='loginArea'>
      <!-- my log in form -->
  </div>
</div>
<!-- CSS -->
<style>
#loginImgContainer { 
  position: relative; 
}
#loginFilter {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
#loginArea { display:none; }
</style>

然后，设置一些javascript来检测模式框

上的焦点

<script>
//assumes you have jQuery enabled
jQuery( document ).ready( function($) {
    //listen for the click
    $( "#loginImgContainer" ).click( function(e) {
        //hide the login image overlay
        $( "#loginFilter" ).fadeOut( 300 );
        setTimeout( function(){
            //hide the login img background
            $( "#loginImg" ).hide( 0 );
            //show the login form
            $( "#loginArea" ).fadeIn( 500 );
        }, 300 );
    });
});
</script>

假设php中有一个名为user_is_logged_in()的函数，它返回一个布尔值响应，你可以将它附加到你的脚本标签:

<?php
if( user_is_logged_in() ):
    //see <http://stackoverflow.com/questions/14778561/open-jquery-colorbox-automatically-on-page-load> for details on this
    ?>
    $.colorbox({inline:true, href:".ajax"});
    <?php
endif;

然后根据您的需要进行编辑，并在我上面提到的地方添加登录表单。

首先创建一个会话，用于检查用户是否登录。$ _SESSION("logedin")然后:

如果(

!收取($ _SESSION [' logedin ']))

并添加如下样式:

<style>
.login{
width:400px;
height:200px;
position:absolute;
z-index:1000;
background-color:#ccc;
border:#999 thin solid;
}
</style>

这是不容易回复没有代码的工作…无论如何，你可以从这里开始:

if(!$user->loggedIn()){
        redirect('/#box');
}