What causes the modal to appear and then vanish suddenly?

I've created a simple modal code with minimal JS involved. When the button is clicked, the modal appears briefly, then the page refreshes and the modal disappears. I'm not sure what could be causing this issue. Any help would be appreciated!

https://jsfiddle.net/wj3r2qzu/

var openModalBtn = document.querySelector("#open-modal-btn");
var backgroundModal = document.querySelector(".background-modal");
var closeModal = document.querySelector(".close-modal");

openModalBtn.addEventListener("click", function() {
    backgroundModal.classList.add("active-bg");
});

closeModal.addEventListener("click", function() {
    backgroundModal.classList.remove("active-bg");
});

Answer №1

Make sure to include type="button" in your sign-up button.

<button class="primary-btn" type="button" id="modal-btn">Sign Up</button>

The default behavior of a button inside a form is type="submit", which means clicking it will submit the form.

Check out this JSFiddle for more information.

Answer №2

According to Anurag's explanation, the button is set by default with type="submit". When this button is inside a form, it will attempt to redirect. One way to handle this in your JavaScript code is to prevent the default behavior of the button.

modalBtn.addEventListener("click", (ev) => {
ev.preventDefault();//by using this line, you can stop the default action of the button
  modalBg.classList.add("bg-active");
});

I hope this information proves useful for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: Failed to locate module @angular/core

When attempting to run an Angular 4 application, I consistently encounter the following error: ERROR in Could not resolve module @angular/core There are no additional errors present. There are no dependency issues whatsoever as @angular/core is located i ...

Displaying a component following data retrieval in Vue.js

I am currently working on consuming an API using axios. Here is the code I have so far: <select> <option v-for="value in values"> value.name </option> </select> // js data(){ values: [], }, create ...

Properties around the globe with Express & Handlebars

Currently, I am utilizing Handlebars (specifically express3-handlebars) for templates and Passport for authentication in my NodeJS application. Everything is functioning smoothly, but I have been contemplating if there is a method to globally pass the req. ...

Concerning Java's Map and Array functionalities

When working with Javascript, we have the ability to create statements like the one below. var f_names = { 'a' : 'Apple', 'b' : 'Banana' 'c& ...

JavaScript object conversion to Java Model is proving to be a challenge

When looking at my Spring controller and client-side Javascript code, I noticed that the Javascript object is having trouble reaching the Spring controller in Object form. Here is a snippet of my Controller code: @RequestMapping(value = "/addRating", meth ...

Unexpected resizing of a div due to Vue animation

I'm currently working on a quiz and I'm trying to incorporate some animation effects when users navigate between questions. I've been experimenting with a fade in and out effect, but there seems to be a glitch. Whenever I click the button, t ...

displaying a confirmation using jQuery in CodeIgniter

Hello everyone, I am a beginner in CodeIgniter and I am seeking assistance. I am attempting to create a confirmation message (div id="delmsg") using jQuery when deleting a record from MySQL database. The delete operation is functioning properly, but the me ...

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

Display information on a table using AJAX within the current webpage

I am encountering an issue with ajax on the same page. Below is my code: $.ajax({ type: "POST", url: "test.php", dataType: 'json', data: {}, success: function (data) { ...

Tips on slowing down the Jquery UIBlock Plugin

Currently, I am implementing a plugin found at http://jquery.malsup.com/block/#overview. However, I am interested in configuring the blockUI feature to only be displayed if an AJAX request takes longer than 1 second. Otherwise, I would prefer for nothing ...

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

I am unsure of the process for implementing an OnClick event to modify the colors of a square

Seeking guidance from the more experienced individuals here as I am just starting out. Any help would be greatly appreciated! This might seem simple to many of you, but for me it's quite challenging. This is how my HTML code looks: <html> < ...

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress

I am attempting to send a PDF file as a POST request. The API supports the use of @RequestPart and @RequestParam: @RequestPart("file") MultipartFile file; @RequestParam(value = "document-types", required = false) Set<String> documentTypes; My appro ...

I am encountering a problem while performing JavaScript validations

In jQuery or using the element's ID, I can validate a textbox. For example: var field = document.getElementById('tbxSearchField').value if (field == "") {alert("please enter text");} The HTML code is as follows: <input class="input" id ...

Using environmental variables in Nuxt 2 or Nuxt 3 - a step-by-step guide

I have an .env file located in the root of my project. In my nuxt config, I am using variables to configure ReCaptcha as shown below: import dotenv from 'dotenv' dotenv.config() export default { modules: [ ['@nuxtjs/recaptcha&ap ...

Remove array element by key (not numerical index but string key)

Here is a JavaScript array that I am working with: [#ad: Array[0]] #ad: Array[0] #image_upload: Array[0] 13b7afb8b11644e17569bd2efb571b10: "This is an error" 69553926a7783c27f7c18eff55cbd429: "Yet another error" ...

Before you can click on it, the dropdown menu mysteriously

After creating a header with a dropdown menu, I am facing an issue where the dropdown disappears before I can click or hover over it. Even after using transitions, the problem persists. What could be causing this? I have limited knowledge in javascript, so ...

The functionality of findDOMNode is no longer supported

My website, built using React, features a calendar that allows users to select a date and time range with the help of the react-advanced-datetimerange-picker library. However, I encounter some warnings in my index.js file due to the use of <React.Stric ...

Incorporate variable key-value pairs into a JavaScript array or object

Is it possible to add a key value pair to an existing JavaScript associative array using a variable as the key? I need this for JSON encoding and prefer a simple solution over using plugins or frameworks. ary.push({name: val}); In the above code snippet, ...

What are the ways in which Angular can offer assistance to Internet Explorer 9?

The news is out - the Angular team has just announced their support for Internet Explorer 9! This revelation has left me wondering, how is it even possible? Currently, I am an avid user of AngularJS and have dedicated time to studying its ins and outs. Fr ...