Javascript 登陆页面时更改背景
我想问一下，当我登陆到一个页面时，我是否知道如何改变我的背景。这是当用户试图进入需要活动会话的页面时的情况。 但是，我想隐藏背景。我只想显示甜警报弹出窗口。 这是我的页面文件 index.phpJavascript 登陆页面时更改背景,javascript,php,sweetalert,Javascript,Php,Sweetalert,我想问一下，当我登陆到一个页面时，我是否知道如何改变我的背景。这是当用户试图进入需要活动会话的页面时的情况。 但是，我想隐藏背景。我只想显示甜警报弹出窗口。 这是我的页面文件 index.php <?php include 'includes/connection.php'; if(!isset($_SESSION['student_id'])){ echo '<script src="https://unpkg.com/sweetalert/dist/s
<?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"> | 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> 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> 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> 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> <?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> Edit Profile</a>
<a class="dropdown-item" href="#"><i class="fas fa-user-lock"></i> Edit Password</a>
<a class="dropdown-item" href="logout_student.php"><i class="fas fa-sign-out-alt"></i> 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>
更改.swal覆盖
类背景色
属性值
从…起
背景色：rgba（0,0,0,4）
背景色：rgba（0,0,0,1）
更改.swal覆盖
类背景色
属性值
从…起
背景色：rgba（0,0,0,4）
背景色：rgba（0,0,0,1）
您必须添加以下CSS
<style type="text/css">
.swal-overlay {
background-color: rgba(0,0,0, 1);
}
</style>
如果没有选项CloseOnClickOut:false
和closeOnEsc:false
，则如果用户在模式窗口外单击（甜蜜警报）或按下Esc
键，页面将再次可见
顺便说一下，我建议使用PHP代码检查活动会话（无论是否登录）并重定向用户，而不是使用Javascript）。任何在浏览器上禁用javascript
的人仍然可以查看页面内容
您必须添加以下CSS
<style type="text/css">
.swal-overlay {
background-color: rgba(0,0,0, 1);
}
</style>
如果没有选项CloseOnClickOut:false
和closeOnEsc:false
，则如果用户在模式窗口外单击（甜蜜警报）或按下Esc
键，页面将再次可见
顺便说一下，我建议使用PHP代码检查活动会话（无论是否登录）并重定向用户，而不是使用Javascript）。任何在浏览器上禁用javascript
的人仍然可以查看页面内容
初始化sweetalert时应设置背景色
$(".swal-overlay").css({"background-color":rgba(0, 0, 0, 1);});
初始化sweetalert时应设置背景色
$(".swal-overlay").css({"background-color":rgba(0, 0, 0, 1);});
我认为您需要更改sweet alert弹出式容器的背景色。我认为您需要更改sweet alert弹出式容器的背景色。您好@Ash1217，我想问一下，在重定向到登录时是否可以进行相同的转换？我已经看到，在sweetalert弹出窗口消失后，它会停留在当前页面上一毫秒，然后重定向，人们可以看到它。我刚刚阅读了你的建议，我使用PHP代码，我使用PHP进行活动会话，它位于另一个文件中。目前，我正在尝试将尚未登录的用户重定向到登录页面。无论如何，谢谢你！您好@Ash1217，我想问一下，在重定向到登录时是否可以进行相同的转换？我已经看到，在sweetalert弹出窗口消失后，它会停留在当前页面上一毫秒，然后重定向，人们可以看到它。我刚刚阅读了你的建议，我使用PHP代码，我使用PHP进行活动会话，它位于另一个文件中。目前，我正在尝试将尚未登录的用户重定向到登录页面。无论如何，谢谢你！您好，我尝试了此属性值，但运行后不会弹出sweetalert。我已检查它，并且它是我端的工作文件。您好，我尝试了此属性值，但运行后不会弹出sweetalert。我已检查它，并且它是我端的工作文件。