I am having a persistent issue regarding jquery modals. Whenever I click on the button with the name test, the modal does show up as I want it to do but it goes to the very top of the screen. Here is the primary code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/style.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">
<script src="//code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="assets/jquery/jquery-modal-master/jquery.modal.min.css" ></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.2/jquery.modal.min.js"></script>
<title>Local Portfolio</title>
</head>
<body>
<div class="card">
<div class="info">
<h1>Java Paint</h1>
<img src="imgs/java_paint.png" alt="Java Paint">
<a href="#java_paint">More Information</a>
<button id = "java_paint_modal" type="button">Test</button>
</div>
</div>
<form id="java_paint" class="modal">
<h2>About</h2>
<p>
A painting app programmed in Java using the Swing Library and Eclipse IDE. Allows the user to draw with a size adjustable pencil as well as changing the its color,
picking a color from the screen and storing it for later use via the rectangle icon in the menu, erase contents as well as drawing a stroke adjustable line and with more features to come in the forseeable future
</p>
</form>
</body>
script.js:
$(document).on('click','#java_paint_modal', function(event) {
event.preventDefault();
console.log("greetings")
$("#java_paint").modal();
});
Keep in mind that i intially used an anchor tag but even thought i switched to a button, it still goes to the top of the screen
I am running this on the Opera GX browser incase it could be a browser issue
To see the issue in action, here is the repo and the website