Pop-up window triggered upon loading the page automatically

I am having trouble getting a pop-up to display whenever an unregistered user tries to access a specific page. I followed an example, but I can't seem to make it work on my page. Any suggestions?

Thanks!

Image:

My code snippet for that page (CSS is included in the image above)

<?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

While you have included jQuery in your code, it's important to note that the modal dialog functionality is part of jQueryUI. However, simply including jQueryUI won't automatically solve your issue. You've designated a div with the class modalDialog, indicating this is the content you want to display in the dialog box. I recommend using IDs instead of classes in this scenario because IDs are meant to represent unique elements within a document.

According to the jQueryUI documentation:

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

To implement the jQuery call, you can use:

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

Alternatively, if you choose to utilize a lightbox modal dialog, your code should be structured as follows:

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

To activate this code snippet, use:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Resizing logo to fit Outlook desktop

https://i.sstatic.net/e34kS.pngWhen creating emails using a Drag & Drop editor in a CRM (Dynamics 365 with ClickDimensions), I encountered an issue with the logo not displaying correctly in Outlook desktop. Despite using inline styling, the logo appeared f ...

The Bootstrap tooltip effectively fades away after displaying text, but it is not positioned correctly above the icon

Having some issues with my tooltip functionality. It seems to display the text on the left side and fades away upon mouseover, but it doesn't show up in a proper tooltip box over the icon as expected. I suspect that there might be a conflict between j ...

Click event triggers nested bootstrap collapse

As a beginner in bootstraps and coding, I am currently experimenting with opening the main bootstrap panel using an onclick event that includes nested sub panels. Here is my index.html file containing the panels and the button; <link href="https://m ...

HTML checkbox URL

Can you design an HTML checkbox form that generates a URL format like this: ?cat=cars+tree Currently, with the following code: <form name="input" action="/" method="post" > <br />Select Categories: <br /> <input type="checkbox" name ...

The angular view is lacking a CSS class

index.html: <div ng-view="myview.html"></div> myview.html: <table class="table table-striped table-hover"> <tr> <td>Name</td> <td>Product</td> </tr> <tr ng-repeat="deal in deals" class="clickableR ...

Enforce movement within an element by using "Tab" clicks – Utilizing Jquery/Javascript

I have designed a dialog box with the role of "dialog" and I am looking to focus on Tab key press inside the dialog box. There is a Close button already present in the dialog. Currently, when the dialog opens, focus shifts to the first input button and the ...

Python regular expression problem with matching regex

Hey there, I'm diving into my first question on stackoverflow and I've been struggling with it for hours. I'm sure the solution is right in front of me, but I just can't seem to find it. My goal is to extract information from a webpage ...

Toggle the visibility of image elements depending on the input entered in the search bar using jQuery

I have a photo gallery grid and I am looking to implement a search functionality for an img tag's 'data-title' value, where only images with matching data will be displayed. For example, if I type "hay" into the search box, only the image be ...

Constructing a comprehensive inventory is a skill that requires strategy

Can someone advise on the best way to create a list structure with one parent category and two subcategories, each containing three items? Would it be ideal to use a combination of span and two uls, or perhaps a mix of span, anchor tags, and ul elements? ...

Is there a way to select text using XPath based on the content of a preceding element

<div class="profile-details"> <div class="profile-info"> <h4 class="">Contact Number</h4> </div> <div class="profile-info"> <p class="">0207 289 2981</p> ...

Ant Design: How can a SubMenu be turned into a clickable link?

Currently, I am developing a Next.js application and utilizing antd's Menu and Submenu components for my NavBar. My goal is to make the SubMenu items clickable links. How can I achieve this functionality? <Menu className={styles.menuContainer} mode ...

MySQL automatically inserts a null record if no value is provided

Currently, I am working on a project that involves inserting, viewing, and deleting records. Although everything functions smoothly, an issue persists where a null record is automatically added for some reason. The deletion feature works perfectly for othe ...

A step-by-step guide on revealing a complete div upon selection

Can anyone assist me in showing a div with a form inside it whenever a specific option is selected from a tag? Here is the code I currently have: <script type="text/javascript"> $(function() { $('#contactOptionSelect&apo ...

Exclude specific IDs from Bootstrap 4 scrollspy functionality

I have consecutive sections, and in between them I have an aside without a corresponding anchor. The issue is that the scrollspy is active with the previous section. I want to adjust the scrollspy so that nothing is highlighted as active at that point, and ...

How to Filter Fields in AngularJS Based on a Start Date and End Date?

Hey everyone, I'm trying to filter items based on the start and end dates using the daterange functionality in my meanjs app. I've tried multiple approaches but haven't found a solution yet. If anyone knows how to do this, please help me out ...

Avoid Refreshing the Page When Pressing the Like Button

I've been working on code for liking a post and saving the value to a database using server-side code. However, I'm running into some issues when the page refreshes after clicking the like button. I tried using event.preventDefault() in my JavaSc ...

Drawing a line beneath the mouse's center using JavaScript

Struggling with my JavaScript drawing tool, particularly the draw() function. The line is consistently off-center below the mouse cursor. How do I fix this issue? My aim is to have the line always follow the center of the mouse as it moves. Could someone c ...

python conducting automation tests with Selenium WebDriver on a mouse

Hello, I'm having trouble with opening the Mouser website and using the search bar to send some data. Below is a sample of the code I've been working on, but I can't seem to find the correct CSS selector. Any help would be greatly appreciate ...

How to incorporate both image and text links within an HTML div container using JavaScript

I am trying to create a clickable image and text within a div named "films" that both link to the same webpage. However, I am experiencing an issue where only the text link works and the image link is disabled. If I remove the text link, then the image l ...

The alignment of the text seem to be malfunctioning

The text-align:center property isn't working as expected. Can someone please assist me in figuring out why it's not functioning correctly? Here is the HTML code snippet: <!DOCTYPE html> <html> <head> <title>Wheat and ...