如何创建重叠登录框

时间:2014-03-19 22:18:18

标签: php css overlay

我想创建一个包含登录框的覆盖页面,每次用户没有登录时都会自动出现。我在php中执行我的代码。我只想显示页面的阴影图像,上面有一个登录框。用户无法登录即可进入该网站。

3 个答案:

答案 0 :(得分:1)

听起来你想要一个由条件$ 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;

然后只需编辑您的需求并添加我在上面表示的登录表单。

答案 1 :(得分:0)

首先创建一个用于检查登录用户的会话。 $ _SESSION [ 'logedin'] 然后:

如果(!isset($ _ SESSION [ 'logedin']))   echo“PUT UR LOGIN FORM HERE”;

并添加此样式:

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

答案 2 :(得分:0)

这不容易回复,没有代码可以继续...无论如何你可以从这里开始:

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