登陆页面时更改背景

Question

我想问下登陆页面时如何改变我的背景。当用户试图进入需要有活动会话的页面时，这就是它应该喜欢的。但是，我想隐藏背景。我只想显示甜蜜的警报弹出窗口。

这是我的页面文件。

index.php

<?php
  include 'includes/connection.php';
  if(!isset($_SESSION['student_id'])){
    echo '<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>';
    echo '<script type="text/javascript">';
    echo 'setTimeout(function () {
        swal({
        title: "Access Failed",
        text: "You are not yet logged in! Redirecting to Login...",
        icon: "warning",
        button: false,
        timer: 2000
        }).then(function(result) {
            window.location = "Login.php?login=notactive";
        });';
    echo '}, 300);</script>';
    // echo "<script>alert('You are not logged in!'); location.href='Login.php';</script>";
  }
  else{
    $expire = 365*24*3600; // We choose a one year duration
    setcookie(session_name(),session_id(),time()+$expire); 
    // echo "<script>alert('You are already Logged in!'); location.href='Home.php';</script>";
  }
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Repository Home</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <link rel="shortcut icon" href="files/Images/logoapp.png">
    <link rel="stylesheet" href="css/style.css">
    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
    </head>
    <body id="panel">
        <!-- Navbar Header -->
        <nav class="navbar fixed-top navbar-expand-sm navbar-custom">
        <a href="index.php" target="_blank" class="navbar-brand ml-3"><img src="#" class="img-responsive" width="35" height="35">&nbsp; | Repo </img> </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarmenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon" role="button" ><i class="fa fa-bars" aria-hidden="true" style="font-size: 25px; margin: 0 auto;"></i></span>
        </button>
            <div id="navbarmenu" class="collapse navbar-collapse">
                <ul class="navbar-nav justify-content-center" style="width: 100%">
                    <li class="nav-item active px-3">
                        <a href="Home.php" class="nav-link text-nowrap"><i class="fas fa-home"></i>&nbsp;Home</a>
                    </li>
                    <ul class="nav navbar-nav">
                        <li class="nav-item dropdown px-3">
                            <a href="repositorymanagement.php" class="nav-link text-nowrap"><i class="fas fa-laptop"></i>&nbsp;Research Repository </a>
                        </li>
                    </ul>
                    <!-- <li id="irene"class="nav-item px-3">
                        <a href="../admin/repositorymanagement.php" class="nav-link text-nowrap"> Repository Management </a>
                    </li> -->
                    <li id="irene"class="nav-item px-3">
                        <a href="requestformmanagement.php" class="nav-link text-nowrap" ><i class="fas fa-newspaper"></i>&nbsp;Request Form Management </a>
                    </li>
                </ul>
                <ul class="nav navbar-nav">
                    <li class="nav-item dropdown px-3 mr-3">
                        <a class="nav-link text-nowrap" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-user"></i>&nbsp; <?php include 'helper/current_user.php'; ?>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item" href="#"><i class="fas fa-user-cog"></i>&nbsp; Edit Profile</a>
                        <a class="dropdown-item" href="#"><i class="fas fa-user-lock"></i>&nbsp; Edit Password</a>
                        <a class="dropdown-item" href="logout_student.php"><i class="fas fa-sign-out-alt"></i>&nbsp; Logout</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    <div class="container-sm" style="padding-top: 100px;">
        <div class="container-sm text-center">
            <div class="col-sm">
            <span id="HeaderBanner"> EMPOWERING WHAT'S NEXT </span>
            </div>
        </div>
            <div class="container-fluid" style="height: auto;width: 100%;">
                <div class="row">
                <div id="IntroductionParagraph" class="col-sm" style="margin-top: 50px;">
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia at aspernatur veniam odit autem, earum explicabo maxime facilis molestiae hic quidem. Laboriosam dolores accusantium consequuntur, odio nulla in deserunt necessitatibus?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum ducimus laudantium labore corporis voluptatem distinctio est praesentium ex. Sed est excepturi quidem labore blanditiis error voluptatibus facilis ipsum nemo consequatur? 
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo culpa, totam alias voluptatum aperiam libero ipsa voluptatem perspiciatis. Quas doloremque dolore reiciendis tenetur accusantium ullam corporis adipisci natus officiis non?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum, repudiandae sint consectetur eius nostrum exercitationem quidem magnam ratione obcaecati maiores iure voluptatum laudantium minus nulla illo. Perferendis eligendi nam aspernatur.
                    </p>
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea.
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime.
                    </p>
                    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eius facere vitae corrupti adipisci, inventore minima laudantium quibusdam ad quas natus consequatur laborum qui dolor assumenda id nostrum sed ea.
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam aperiam enim quod quae minus et perferendis magni eius, quibusdam est consequatur ab facilis nihil odit atque doloribus nesciunt ipsum. Maxime.

                    </p>
                </div>
                <div class="col-sm">
                    <img src="https://i.ibb.co/mbPvK7Q/women-inoff.png" class="img-responsive" style="width: 100%; height: auto;">
                </div>
                </div>
            </div>
    </div>
    <!-- #START# -----------ADDING OF MODAL ------------------# -->
    <!-- Large modal -->
    <script type="text/javascript" src="./js/responsive_modal.js">
        
    </script>
    <!-- #END# -------------ADDING OF MODAL ------------------# -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  </body>
</html>

非常感谢。

Answer 1

更改 .swal-overlay class background-color 属性值从 background-color: rgba(0,0,0,.4); 至 background-color: rgba(0,0,0,1);

.swal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0;
    overflow-y: auto;
    background-color: rgba(0,0,0,1);
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s;
}

Answer 2

您必须添加以下内容CSS

<style type="text/css">
.swal-overlay {
    background-color: rgba(0,0,0, 1);
}
</style>

此外，设置以下选项以防止在单击或 Esc 按键时关闭模式。

swal({
        closeOnClickOutside: false,
        closeOnEsc: false,
        title: "Access Failed",
    .... rest of your code

没有选项 closeOnClickOutside: false 和 closeOnEsc: false，如果用户在模态 window（甜蜜警报）外单击或按Esc键。

By the way, I'd recommend using a PHP code checking for the active session (whether logged in or not) and redirect the user, rather than using the Javascript). Anyone with javascript disabled on their browser still can view the page content.

Answer 3

初始化 sweetalert 时应设置背景颜色

$(".swal-overlay").css({"background-color":rgba(0, 0, 0, 1);});

登陆页面时更改背景

Change Background when landing on a page

javascript

php

sweetalert