Question

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

谢谢！

我在该页面上的代码（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>

Answer 1

虽然你包含了jQuery，但是模式对话框是jQueryUI的一部分。但这本身并不能解决你的问题。你已经用类modalDialog声明了一个div，所以我想这是在对话框中显示的行。我建议你使用id而不是类，因为一个类覆盖了多个文档对象，你真的想在这里显示一个对话框。来自jQueryUI docs：

<div id="dialog" title="Please register">
    <p>You cannot view this page! Please register</p>
</div>

添加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();
    });
  });

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

1 个答案: