Html 页面加载时自动弹出窗口_Html_Css

Html 页面加载时自动弹出窗口

html css

Html 页面加载时自动弹出窗口,html,css,Html,Css,我正试图允许一个弹出窗口显示时，用户基本上是未注册，并希望查看特定的页面。我看到了一个如何做到这一点的例子，但我完全卡住了它没有出现在我的网页上。有什么想法吗谢谢图片：我在该页面上的代码CSS列在上图中 <?php session_start(); include ('../includes/config.php'); include ('../includes/header.php'); ?> <!DOCTYPE HTML> <html> &

我正试图允许一个弹出窗口显示时，用户基本上是未注册，并希望查看特定的页面。我看到了一个如何做到这一点的例子，但我完全卡住了它没有出现在我的网页上。有什么想法吗

谢谢

图片：

我在该页面上的代码CSS列在上图中

<?php
 session_start();
include ('../includes/config.php'); 
include ('../includes/header.php'); 
?>

<!DOCTYPE HTML>

<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />

<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
  // Initiate Lightbox
  $(function() {
    $('.gallery1 a').lightbox(); 
  });
</script>

</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>

<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
    <div class="logo">
         <a href="index.php"><img src="../images/logo.png"> </a>
    </div>
    <div class="cssmenu">
    <ul>
       <li><a href="index.php"><span>Home</span></a></li>
        <li><a href="about.php"><span>About</span></a></li>
       <li class="active" class="has-sub"><a href="service.php"><span>Gallery</span></a>
       </li>
       <li class="last"><a href="contact.php"><span>Contact</span></a></li>
     <div class="clear"></div>

                         <div class="search">
                    <h2>search</h2>
            <form>
                <input type="text" value="" placeholder="Enter Your search...">
                <input type="submit" value="">
            </form>
        </div>
     <?php
if(isset($_POST["submit"])){

if(!empty($_POST['user']) && !empty($_POST['pass'])) {
    $user=$_POST['user'];
    $pass=$_POST['pass'];

    $pass = strip_tags($pass); 
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.



    $query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
    $numrows=mysql_num_rows($query);
    if($numrows!=0)
    {
    while($row=mysql_fetch_assoc($query))
    {
    $dbusername=$row['username'];
    $dbpassword=$row['password'];
    }

    if($user == $dbusername && $pass == $dbpassword)
    {
    session_start();
    $_SESSION['sess_user']=$user;

    /* Redirect browser */
    header("Location: member.php");
    }
    } else {
    echo "<div class='results'>Invalid username or password!</div>";
    }

} else {
    echo "All fields are required!";
}
}
?>

                 <div class="search1">

            <h2>login/Register</h2>


            <form action="" method="POST">

            <label>Username:</label>
                <input type="text" name="user" required />
            <label>Password:</label>
                <input type="password" name="pass" required />
                <input type="submit" value="Login" name="submit" class="submit" />
                <br><br>
                <center>
                <h2><p><a href="register.php">Register</a></p></h2>
                </center>
    </form> 
    </div>

    </div>
     </ul>
    </div>
    <div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
    <div class="footer2">
        <div class="copy">
            <p class="w3-link">©&nbsp;</p>
        </div>
        <div class="f_nav">
        <ul>
            <li><a href="#">Skype</a></li>
            <li><a href="#">Linked in</a></li>
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Facebook</a></li>
        </ul>
        </div>
        <div class="clear"></div>
    </div>
</div>
</div>
</div>
</body>
</html>

尽管您包括jQuery，但模态对话框是jQueryUI的一部分。但这本身并不能解决你的问题。您已经用modalDialog类声明了一个div，所以我想这是对话框中要显示的行。我建议您使用id而不是类，因为一个类包含多个文档对象，并且您确实希望在这里显示一个对话框。从：

这应该很管用如果您决定使用lightbox模式对话框，您的代码应该如下所示：

<div id="test-modal" class="white-popup-block mfp-hide">
    <h1>lease register</h1>
    <p>You cannot view this page! Please register</p>
    <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>

在你的屏幕截图中有一个错误，错误是怎么说的？@caramba你在说什么错误？动画？哦，我想inspector右上角的1和红色的x有一个错误。无论如何，你的代码很难开始。您可以在PHP中设置函数，在正确的位置返回所需的HTML部分。或者可以使用PHP将类返回到一些HTML元素。然后使用javascript jQuery检查这些类是否存在。如果存在，则显示或隐藏元素。

$(function() {
    $( "#dialog" ).dialog();
});

<div id="test-modal" class="white-popup-block mfp-hide">
    <h1>lease register</h1>
    <p>You cannot view this page! Please register</p>
    <p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>

  $(function () {
    $('.popup-modal').magnificPopup({
      type: 'inline',
      preloader: false,
      focus: '#username',
      modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
      e.preventDefault();
      $.magnificPopup.close();
    });
  });