Here is my cshtml page. I wanted to make a PopUp inside my cshtml. I created popup but it was having an issue with keyframes; then I tried to use it without keyframes but it lost it is fade how can I fix my @keyframes :( (tried the code on chrome and opera)
I got these codes from .asp, first I tried to use every code in different places like putting css to css file and calling it inside the cshtml and did the same for JavaScript too but it didn't worked this is why I used them all inside in cshtml page.
// I am new here I don't know how the highlight the problem in code so I pasted it here too sorry.
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@{
ViewBag.Title = "Ekle";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<main>
<div class="container-fluid px-4">
<h1 class="mt-4">EKLE</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Personel ekle</li>
</ol>
<div class="Personalbilgigiriş">
<form>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputFirstName" type="text" placeholder="Enter first name" />
<label for="inputFirstName">First name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input class="form-control" id="inputSurname" type="text" placeholder="Enter Surname" />
<label for="inputSurname">Surname</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" idid="inputOffice" type="text" placeholder="Office name" />
<label for="inputOffice">Office name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputAge" type="number" placeholder="Age" />
<label for="inputAge">Age</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputStartdate" type="datetime" placeholder="Starting Date" />
<label for="inputStartdate">Starting date</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputSalary" type="number" placeholder="Salary" />
<label for="inputSalary">Salary</label>
</div>
</div>
</div>
<div class="col-md-10">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<div class="popup" onclick="myFunction()">
<a class="btn btn-primary btn-block" style="text-align: center" >Save staff </a>
<span class="popuptext" id="myPopup">Staff Saved!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</div>
</form>
</div>
</div>
</main>
This my _Layout cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<link href="@latest/dist/style.css" rel="stylesheet" />
<link href="/Content/css/styles.css" rel="stylesheet" />
<script src=".15.3/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
@Html.Partial("_SideNavMenu")
</div>
<div id="layoutSidenav_content">
@Html.Partial("_Header")
<div class="Container">@RenderBody()</div>
@Html.Partial("_Footer")
</div>
</div>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="/Scripts/scripts.js"></script>
<script src=".js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="@latest" crossorigin="anonymous"></script>
<script src="/Scripts/datatables-simple-demo.js"></script>
</body>
</html>
This is my error enter image description here
Here is my cshtml page. I wanted to make a PopUp inside my cshtml. I created popup but it was having an issue with keyframes; then I tried to use it without keyframes but it lost it is fade how can I fix my @keyframes :( (tried the code on chrome and opera)
I got these codes from https://www.w3schools./howto/howto_js_popup.asp, first I tried to use every code in different places like putting css to css file and calling it inside the cshtml and did the same for JavaScript too but it didn't worked this is why I used them all inside in cshtml page.
// I am new here I don't know how the highlight the problem in code so I pasted it here too sorry.
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
@{
ViewBag.Title = "Ekle";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<main>
<div class="container-fluid px-4">
<h1 class="mt-4">EKLE</h1>
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Personel ekle</li>
</ol>
<div class="Personalbilgigiriş">
<form>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputFirstName" type="text" placeholder="Enter first name" />
<label for="inputFirstName">First name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating">
<input class="form-control" id="inputSurname" type="text" placeholder="Enter Surname" />
<label for="inputSurname">Surname</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" idid="inputOffice" type="text" placeholder="Office name" />
<label for="inputOffice">Office name</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputAge" type="number" placeholder="Age" />
<label for="inputAge">Age</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputStartdate" type="datetime" placeholder="Starting Date" />
<label for="inputStartdate">Starting date</label>
</div>
</div>
<div class="col-md-6">
<div class="form-floating mb-3 mb-md-0">
<input class="form-control" id="inputSalary" type="number" placeholder="Salary" />
<label for="inputSalary">Salary</label>
</div>
</div>
</div>
<div class="col-md-10">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
<div class="popup" onclick="myFunction()">
<a class="btn btn-primary btn-block" style="text-align: center" >Save staff </a>
<span class="popuptext" id="myPopup">Staff Saved!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</div>
</form>
</div>
</div>
</main>
This my _Layout cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<link href="https://cdn.jsdelivr/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" />
<link href="/Content/css/styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="sb-nav-fixed">
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
@Html.Partial("_SideNavMenu")
</div>
<div id="layoutSidenav_content">
@Html.Partial("_Header")
<div class="Container">@RenderBody()</div>
@Html.Partial("_Footer")
</div>
</div>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="/Scripts/scripts.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr/npm/simple-datatables@latest" crossorigin="anonymous"></script>
<script src="/Scripts/datatables-simple-demo.js"></script>
</body>
</html>
This is my error enter image description here
Share Improve this question edited Jun 22, 2021 at 20:02 DAF 1435 bronze badges asked Jun 22, 2021 at 19:34 Bugra KucukBugra Kucuk 752 silver badges13 bronze badges 6- You have a style for .popup .show, but I would imagine it needs to be a pound class .popup.show instead (remove the space). This change will work as I assume you are adding the show class to the to the popup in the html. – Nathaniel Flick Commented Jun 22, 2021 at 19:40
- it didn't worked i feel like i have some missing one of theese "{ , ( , ; }" i forgot to upload my error will upload it now. – Bugra Kucuk Commented Jun 22, 2021 at 19:50
- I'd remend taking that style code out of your cshtml and into a css file. – Nathaniel Flick Commented Jun 22, 2021 at 19:52
- 2 You can also try escaping keyframes in your razor templates with @@: stackoverflow./questions/19430282/… – Nathaniel Flick Commented Jun 22, 2021 at 20:10
- 1 You are amazing it is working! could you paste it as an answer so i can mark it as an answer to help other people like me fade is back! – Bugra Kucuk Commented Jun 22, 2021 at 20:13
1 Answer
Reset to default 6I remend you refactor your css out of your razor template (separation of concerns) but to have the keyframes inline you need to double the @ symbol to escape that code so it doesn't register as an error when you run/pile it.
Hat tip to this post covers escaping keyframes in your razor templates with @@: Razor output @-webkit-keyframes
So in your case update your keyframes with @@:
/* Add animation (fade in the popup) */
@@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}