javascript - PHP 显示隐藏的 Div

Question

这是我的代码:

<?php
require_once("include/membersite_config.php");
if(isset($_POST['submitted']))
{
if($fgmembersite->Login())
{
$fgmembersite->RedirectToURL("login-home.php");
}
}
?>

<script>
window.onload = function() {
function validate(e) {
var username = document.getElementById('username');
if (username.value.trim() == '') {
username.style.backgroundColor = '#ff4c4c';
e.preventDefault();
} else {
username.style.backgroundColor = null;
}
var password = document.getElementById('password');
if (password.value.trim() == '') {
password.style.backgroundColor = '#ff4c4c';
e.preventDefault();
}else {
password.style.backgroundColor = null;
}
}
document.getElementById('login').addEventListener('submit', validate);
}
</script>

<div id="navrow">
<img style="float: left;" src="questerslogoresized.png" />
<ul>
<li>Register</li>&nbsp&nbsp&nbsp
<li>About</li>&nbsp&nbsp&nbsp
<li>Reviews</li>&nbsp&nbsp&nbsp
<form id='login'  action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post'>
<div style="position: absolute; right: 120px;">
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='text' name='username' class="formlogin" placeholder='Username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="20" />
<span id='login_username_errorloc' class='error'></span>
<input type='password' class="formlogin" placeholder="Password" name='password' id='password' maxlength="50" />
<span id='login_password_errorloc' class='error'></span>
</div>
<input type='submit' name='Submit' value='Submit' />
<!--<div class='short_explanation'><a href='reset-pwd-req.php'>Forgot Password?</a></div>-->
<div><span style='color: #fff; position: absolute; top: 55px; right: 398px;'><?php echo $fgmembersite->GetErrorMessage(); ?></span></div>
</div>
</form>
</ul>

<div id="passwordpopup" style="display: none;">
<div id="popup">
<h1>HI THERE!</h1>
</div>
</div>

这是我的 CSS:

#popup {
 width: 175px;
 height: 100px;
 color: red;
 background: green;
 position: absolute;
 top: 15px; 
}

.formlogin {
 border-radius: 12px 12px 12px 12px;
 height: 24px;
 /*width: 200px;*/
 padding: 5px;
 border-style: solid;
 border-color: #0093cc;
 -webkit-transition: border-color 1s ease;
 -moz-transition: border-color 1s ease;
 -o-transition: border-color 1s ease;
 -ms-transition: border-color 1s ease;
 transition: border-color 1s ease;
 display: inline-block;
 font-size: 16px; 
 width: 12.5em;
 position: relative;
 top: -2em;
}

最后，这是我的 PHP:

if(!$this->CheckLoginInDB($username,$password))
        {
            echo '<style type="text/css">
        #navrow {
            height: 70px;
        }
        </style>';
        $this->HandleError("Incorrect username or password.");
            return false;
        }

        $_SESSION[$this->GetLoginSessionVar()] = $username;

        return true;
    }

我想知道如何让隐藏的 div passwordpopup 出现(而不是隐藏)在我的 PHP 语句中，在 $this->HandleError("Incorrect username或密码。”); 是。

希望能帮到你。再次感谢 Stackoverflow!

Answer 1

只需用 !important 覆盖内联样式:

#passwordpopup[style]{
display:block !important;
}

或者在你的 PHP 中:

echo '<style type="text/css">#navrow {height: 70px;} #passwordpopup[style]{display:block !important;}</style>';