We Keep Coding

Delete request using box modal in MVC

I have a box modal that I created in my view using HTML that is called when the user presses a button called delete if they wanted to delete a request. From here the user sees two buttons, one to confirm the deletion and one the cancel the deletion. However when I click the delete button the box modal pops up but the buttons confirm and cancel don't delete. I am using MVC .NET core Framework for this project and I want the user to be able to delete requests but to be prompted if they are certain that they want to delete them.
#model PsSecurityRequest
<!-- The Modal -->
<button id="mybtn">Delete</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h3>Are you sure you want to permanetly delete this request?</h3>
<span class="close">×</span>
<input type="submit" class="btn btn-primary" value="Confirm" asp-controller="AdminPage" asp-action="Delete" asp-route-id="#Model.RequestId" />
<input type="submit" class="btn btn-primary" value="Cancel" asp-controller="AdminPage" asp-action="Index" />
</div>
</div>
The view that I am using for the box modal is shown here.
function AdminPage() {
//var Status = document.getElementById("ddlState");
//var Confirm = document.getElementsByClassName("Confirm");
//var Cancel = document.getElementsByClassName("Cancel");
//var _Confirm = "Confirm"
//Confirm.classList.add("hide");
//Cancel.classList.add("hide");
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("mybtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
This is the javascript file that I am using in this project.
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Here is the .cs file I am using as well for the box modal.
public IActionResult Delete(int Id)
{
// var id;
//_psSecurityRequestRepository = PsSecurityRequest.GetRequest();
// PsSecurityRequest deleteRequest = _psSecurityRequestRepository.GetRequestById(Request);
PsSecurityRequest securityRequest = _psSecurityRequestRepository.GetRequestById(Id);
//PsSecurityRequest repo = new PsSecurityRequest();
// var _data = repo.Requests();
_psSecurityRequestRepository.DeleteRequests(securityRequest);
return View(securityRequest);
}
This is the action method that is called when the user will confirm to delete a request. Finally here is the repository that has the methods that are seen in the action method within the controller.
public PsSecurityRequest GetRequestById(object id)
{
throw new NotImplementedException();
}
//[HttpPost, ActionName ("Delete") ]
public void UpdateShortEmplId(PsSecurityRequest psSecurityRequest)
{
_appDbContext.Update(psSecurityRequest);
_appDbContext.SaveChanges();
}
public void FixEmplId()
{
foreach(PsSecurityRequest psSecurityRequest in psSecurityRequests)
{
if (psSecurityRequest.SecurityForEmplid.Length < 7)
{
psSecurityRequest.SecurityForEmplid = "0" + psSecurityRequest.SecurityForEmplid;
_appDbContext.Update(psSecurityRequest);
}
}
_appDbContext.SaveChanges();
}
public void DeleteRequests(PsSecurityRequest Request)
{
_appDbContext.Remove(Request);
throw new NotImplementedException();
}

How to make div modal scrolled to the top each time I open it?

I have built a modal by pure html, CSS, javascript.
It would pop-up as I click a button on the main page.
However, if I scroll down the model and close it, it would show the scrolled-down view as I reopen it. How can I make it always show the content at the top each time I open the model?
Here is my code:
<div class="button" id="btn"></div>
<div class="modal" id="mymdl">
<div class="modal-content" id="mdl-con">
<div class="modalwidth">
<img class="image-title" id="img-ttl" src="./img/banner.png">
<span class="close" aria-hidden="true">×</span>
</div>
<div class="paragraph">
Here is the main content.
</div>
</div>
</div>
document.getElementById('btn').addEventListener('click', function(e) {
modal.style.display = "block";
});
var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
modal.style.display = "none";
}
I have tried window.scroll method provided in the solution of this problem, but it didn't solve my problem.
I'm new to html, css, and javascript. Any idea would be appreciated! Thanks in advance.

Here's one way, rather than scroll to the top, bring the modal top to you.
document.getElementById('btn').addEventListener('click', function(e) {
modal.style.display = "block";
modal.style.top = window.pageYOffset + 10 + "px";
});
const modal = document.querySelector('.modal')
const btns = document.querySelectorAll('.btn');
for (let x = 0; x < btns.length; x++) {
btns[x].addEventListener('click', function(e) {
modal.style.display = "block";
modal.style.top = window.pageYOffset + 10 + "px";
console.log(window.pageYOffset, modal.style.top);
});
}
.container {
height: 1000px;
}
.btn {
display: inline-block;
margin-top: 400px;
}
.modal {
padding: 20px;
position: absolute;
width: 200px;
background: rgba(0, 0, 0, .5);
color: #fff;
}
<div class='container'>
<div class='modal'>Modal</div>
<button class='btn'>click</button>
<hr>
<button class='btn'>click</button>
</div>

You can use element.scrollTop = 0 to scroll it to the top.
For example if .paragraph is what's getting scrolled, you can use something like this:
const modal = document.getElementById("mymdl");
document.getElementById('btn').addEventListener('click', function(e) {
modal.style.display = "block";
});
var closeX = document.getElementsByClassName("close")[0];
closeX.onclick = function() {
modal.querySelector(".paragraph").scrollTop = 0; //scroll to the top
modal.style.display = "none";
}
.modal
{
position: fixed;
}
.modal-content
{
border: 1px solid black;
}
.paragraph
{
overflow: auto;
height: 50vh;
white-space: pre;
text-align: center
}
.paragraph > div
{
height: 120%;
}
.paragraph > span
{
position: relative;
bottom: 0;
}
.button,
.close
{
cursor: pointer;
}
<div class="button" id="btn">open modal</div>
<div class="modal" id="mymdl">
<div class="modal-content" id="mdl-con">
<div class="modalwidth">
<img class="image-title" id="img-ttl" src="./img/banner.png">
<span class="close" aria-hidden="true">×</span>
</div>
<div class="paragraph">
<div>Here is the main content.
scroll down</div><span>bottom</span>
</div>
</div>
</div>

Multiple modals can only close 1

I have managed to make multiple modals on my website however I can only close the last one of the three even though they have 3 seperate functions with 3 different classes.
How do I make it so that each modal i opened by it's appropriate button and closed when you click out of the modal window.
HTML
<div class="container flex bg-black-opacity mt-40 rounded pt-10 pb-12 mb-10 mx-auto items-center">
<div class="container ml-5 cursor-pointer" id='1btn'>
<img src="assets/img/merch-1.png" alt="" style='height: 400px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
<div id="1mdl" class="modal1">
<!-- Modal content -->
<div class="modal-content">
<p>Some text in the Modal..</p>
</div>
</div>
<div class="container ml-5 cursor-pointer" id='2btn'>
<img src="assets/img/merch-2.png" alt="" style='height: 400px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
<div id="2mdl" class="modal2">
<!-- Modal content -->
<div class="modal-content">
<p>Some text in the Modal..</p>
</div>
</div>
<div class="container ml-5 cursor-pointer" id='3btn'>
<img src="assets/img/merch-3.png" alt="" style='height: 400px;' class='shadow-pink'>
<p class='uppercase mt-4 text-white'>Vice Versa 2020 Heather Grey Sweatshirt</p>
<p class="text-white mt-4 ml-1 text-2xl">£15.00</p>
</div>
<div id="3mdl" class="modal3">
<!-- Modal content -->
<div class="modal-content">
<p>Some text in the Modal..</p>
</div>
</div>
</div>
CSS
.modal1 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal3 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
JavaScript
var modal1 = document.getElementById("1mdl");
var modal2 = document.getElementById("2mdl");
var modal3 = document.getElementById("3mdl");
var btn1 = document.getElementById("1btn");
var btn2 = document.getElementById("2btn");
var btn3 = document.getElementById("3btn");
btn1.onclick = function() {
modal1.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
btn3.onclick = function() {
modal3.style.display = "block";
}
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
}

Reassigning the click event overrides the previous binded callback function
simply use this (kept it simplified as it is in the original question)
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
} else if (event.target == modal2) {
modal2.style.display = "none";
} else
if (event.target == modal3) {
modal3.style.display = "none";
}
}

You are overwriting window.onlick again & again by reassigning
it.
Add below lines
window.onclick = function(event) {
if (
event.target.id == modal1.id ||
event.target.id == modal2.id ||
event.target.id == modal3.id
) {
document.getElementById(event.target.id).style.display = "none";
}
}
Remove below lines
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modal3) {
modal3.style.display = "none";
}
}
fiddle link

You need not to use window.onlick 3 times. Just use a common class for all modal like "modal" and change in the css as well. Use window.oncick to check whether target has class "modal" if true then display none.
window.onclick = function(event) {
if(event.target.classList.contains("modal")){
event.target.style.display="none";
}
}
Details in Codepen

Attempting to create two different modals but the two buttons bring up the same modal. Can someone help me?

I have a fiddle here with the code I am trying to write. As the title suggests, I want to (even 3 eventually) modals that fade in when a button is clicked. Right now both buttons bring up the same original modal. I'm sure its an easy answer but can someone point me where I am wrong?
Here is the fiddle
https://jsfiddle.net/cqfa4uh6/2/
Html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<button id="myBtn2">Open Modal2</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal2">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header2">
<span class="close2">×</span>
<div class="modal-body2">
<p>Testing Some other text in the Modal Body</p>
<p>Testing Some more other text...</p>
</div>
</div>
</div>
</body>
</html>
CSS
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal, .modal2 {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content, .modal-content2 {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* The Close Button */
.close, .close2 {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.close2:hover,
.clos2:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body, .modal-body2 {
padding: 2px 16px;
background-color: #5cb85c;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
Javascript
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

Here's what's wrong in the Fiddle code:
In the HTML, the divs aren't closed correctly for modal 1, so modal 2 is "held" within modal 1.
In The JS, the first set of click events for the modal1 is being overridden by the second set of event listener code for the modal2. Also, the two event listeners attached to window need to be combined into one single handler. Otherwise, the second one would override the first one, since there's only one handler for onclick. Use addEventListener to bind multiple event handlers to a particular event on a particular DOM element. Here's the doc for EventListener interface.
Here's the fixed Fiddle.

The event handlers in the second half of the code are all referencing modal instead of modal2. Fix with the below:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}

check the next:
btn2.onclick = function() {
modal.style.display = "block";
}
with btn2 you should display modal2 not modal

Javascript: Avoiding multiple pop up boxes / check if div is empty

I created a pop up box that appears when a user clicks a button. Currently I am able to get the box to appear but when the user closes it and re-opens it the code is ran through again and another box is stacked on top of the old one.
What I want to do is make it so no matter how many times the user clicks the box it only shows one box... my thoughts was maybe checking if it was empty similar to How do I check if an HTML element is empty using jQuery? however that has not worked so far.
Any suggestions for a noob idiot? Appreciation for all responses in advance.
<button onclick="popup()">text</button>
<script>
var box = document.getElementById('popupbox');
function popup(){
box.style.display = "block";
var content = document.createElement('div');
content.className = 'boxstyle';
content.innerHTML = ' ...a handful of tags...';
box.appendChild(content);}
function exit(){
box.style.display = "none";}
</script>

You can create a popup using a modal as follows. I just copied code from here
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>

I actually managed to solve it by simply tossing in box.innerHTML = '' right after the block appears so that it has a clean slate to work with. I was trying to go a little more elegant and seeking to use an If/Else statement but in the end it seems to work. Much appreciation for all who answered / commented, you all are awesome!
<button onclick="popup()">text</button>
<script>
var box = document.getElementById('popupbox');
function popup(){
box.style.display = "block";
box.innerHTML = '';
var content = document.createElement('div');
content.className = 'boxstyle';
content.innerHTML = ' ...a handful of tags...';
box.appendChild(content);}
function exit(){
box.style.display = "none";}