如何解决登陆页面时更改背景
我想问一下登陆页面时如何更改我的背景。当用户尝试访问需要活动会话的页面时，这应该是这样的。
但是，我想隐藏背景。我只想显示甜蜜的警报弹出。
这是我的页面文件。
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"> | 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,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>
非常感谢。
解决方法
您必须添加以下 CSS
<style type="text/css">
.swal-overlay {
background-color: rgba(0,1);
}
</style>
此外，设置以下选项以防止在单击或 Esc 键按下时关闭模态。
swal({
closeOnClickOutside: false,closeOnEsc: false,title: "Access Failed",.... rest of your code
如果没有 closeOnClickOutside: false 和 closeOnEsc: false 选项，如果用户在模态窗口外单击（甜蜜警报）或按 Esc 键，页面将再次可见。
顺便说一下，我建议使用 PHP 代码检查活动会话（无论是否登录）并重定向用户，而不是使用 Javascript）。在浏览器上禁用 javascript 的任何人仍然可以查看页面内容。
更改 .swal-overlay 类 background-color 属性值
从
background-color: rgba(0,.4);
到background-color: rgba(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,1);
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity .3s;
}
初始化sweetalert时应设置背景颜色
$(".swal-overlay").css({"background-color":rgba(0,1);});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
