Trouble with closing Bootstrap 4 modal

My Bootstrap 4 modal is causing issues as it pops up on button click but won't close unless I refresh the page. I've been attempting to get it to close by clicking the 'close' button or simply by clicking anywhere on the main page body.

Despite trying all combinations of class, data-toggle, target, and other attributes from the Bootstrap documentation (link: https://getbootstrap.com/docs/4.0/components/modal/), the issue persists.

Below is the code used to open the modal:

<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a id="create-event" data-toggle="modal" data-target="#createModal" class="nav-link" href="#">Create Event</a>
    </li>
  </ul> 

And here is the code for the modal itself:

<div class="modal-container register modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="row" role="document">
    <div class="col-md-3 register-left">
      <i class="far fa-calendar-alt fa-10x"></i>
      <h3>Create a new event</h3>
      <button type="button" class="btn btn-default" aria-label="Close" data-toggle="modal" data-target="#createModal" class="close" data-dismiss="modal">Close</button>
    </div>
    <div class="col-md-9 register-right">
      <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
          <h3 class="register-heading">Parr Family</h3>
          <div class="row register-form">
            <div class="col-md-6">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Add event" value="" />
              </div>
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Description" value="" />
              </div>
              <div class="maxl">
                <label class="radio inline"> 
                  <input type="radio" name="person-select" value="helen" checked>
                  <span class="person-select-span"> Helen </span> 
                </label>
                <label class="radio inline"> 
                  <input type="radio" name="person-select" value="bob">
                  <span class="person-select-span"> Bob </span> 
                </label>
                <label class="radio inline"> 
                  <input type="radio" name="person-select" value="violet">
                  <span class="person-select-span"> Violet </span> 
                </label>
                <label class="radio inline"> 
                  <input type="radio" name="person-select" value="dash">
                  <span class="person-select-span"> Dash </span> 
                </label>
                <label class="radio inline"> 
                  <input type="radio" name="person-select" value="jackjack">
                  <span class="person-select-span"> Jack-Jack </span> 
                </label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <input type="date" class="form-control" placeholder="Date" value="" />
              </div>
              <div class="form-group">
                <input type="time" class="form-control" placeholder="Time" value="" />
              </div>
              <input type="submit" class="btnRegister"  value="Create"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

My objective is to have the modal close reliably using either method mentioned. I am open to suggestions and solutions.

Update: By adding 'modal-dialog' as a class to the second div, the modal can be closed, but it introduces unwanted styling. Further adjustments might be needed.

Another update: Shifting 'modal-dialog' to the subsequent div resolved all issues effectively.

Answer №1

If you find yourself with multiple modals on your page, consider assigning an ID to the close button and utilizing jQuery to handle the modal closure. For instance, you could set the ID to "closeBtn", and then implement the following code snippet to close the modal:

$('#closeBtn').click(function(e){
    e.preventDefault();
    $('#createModal').modal('hide');
})

Answer №2

let popup = document.getElementById('testPopup');
function Hide() {
    popup.style.display = 'none'
}
var closeBtn = document.getElementsByClassName('closeBtn');
closeBtn.addEventListener('click', Hide);

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

Displaying specific data points

I am encountering an issue where I want to select multiple values and have each selected value displayed. However, when I make a selection, I only see one value from a single box. I do not wish to use append because it keeps adding onto the existing valu ...

Displaying iframes in AngularJS using a service

I am currently developing an Angular app and encountering some difficulties with rendering a Soundcloud embed iframe in my HTML. The issue arises when I try to display the tracks stored in the array generated by my getTracks function. Despite successfully ...

Update the numerical data within a td element using jQuery

Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...

Using Selenium in Python, loop through webpages to extract the search result position

Currently, I am using a script to search for a generic keyword and determine the rank of my products on an e-commerce platform. The code below has been working successfully in fetching the product ranks on the first page. from selenium import webdriver dr ...

Utilizing Node.js to Retrieve Data from MySQL

Hi there, I'm new to NodeJS and I'm curious about how to fetch a MySQL query like we do in PHP. $query = mysql_query("SELECT * FROM accounts"); while($fetch = mysql_fetch_array($query)) { echo $fetch['Username']; } How would this be ...

Creating a callback in C code with Emscripten for JavaScript integration

In this challenge, the goal is to incorporate a JavaScript function as a callback to display progress during a while-loop operation. For example: var my_js_fn = function(curstate, maxstate){//int variables console.log(curstate.toString() + " of " + maxsta ...

The content of xmlhttp.responseText is not being displayed in the innerHTML

As part of my ongoing effort to enhance my understanding of Ajax for work purposes, I have been following the W3Schools tutorial and experimenting with my Apache2 server. In this process, I have placed a file named ajax_info.txt on the server (in /var/www ...

Tutorial on how to update a specific value in an array of objects using setState on click event

I need to toggle the active class on click, setting it to a local state and changing all other objects in the state to inactive. const [jobType, setJobType] = useState([ { "class": "active", "type& ...

Update the image and heading simultaneously when hovering over the parent div

I am looking to enhance the user experience on my website by changing the color of headings and images when a user hovers over a specific section. Currently, I have been able to achieve this effect individually for each element but not simultaneously. Any ...

How to set the default value of a select dropdown in PHP

I came across this snippet of code: <td> <select class="versionSelect"> <option value="5" <?php if($item->version === "5") echo "selected='selected'"; ?>>5</option> <option value="6" <?php ...

The mobile devices are not showing my HTML website

I have implemented the following CSS link code on my website: <link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" > Additionally, I have included the following code <meta name="HandheldFriendly" content="True"> & ...

Ways to align list items in the middle of a webpage with CSS

Currently, I am working on a website and looking to create a customized list where the pictures act as clickable links. You can check out the website here. My goal is to have the links adjust to align left based on the browser size, and also have the imag ...

How can you send Django context data to a JavaScript variable?

I need to send each value of the {{ i.nsn }} to the ajax script one by one. {% for i in dibbs %} <p>{{ i.nsn }}</p> {% endfor %} Instead of repeating the ajax script, I want it to function with a single click. <script> var nsn = " ...

Encountering difficulties in transferring bulky files with the request module in Node.js

When working on a Node.js project, I encountered an issue with transferring files from the computer to the server. While I am able to successfully send files that are up to 2mb in size, larger files fail to upload. Here is the code snippet I am using: var ...

Tips for avoiding duplicate elements in ASP.NET during postback

My issue is that I have a div with the ID "mydiv" and runat=server. <div ID="mydiv" runat="server"></div> I move mydiv to a Container using jQuery. $("#mydiv").appendTo('#Container'); After a PostBack, my div gets duplicated and I ...

How to Vertically Center a Span in a Mat-Header-Cell with Angular 5 Material

In my angular5 application, I am utilizing a material table to showcase some data. Within a mat-header-cell, I have a combination of a span and an img, and I'm attempting to align them correctly. This is how it currently appears: https://i.sstatic. ...

Sending a property as a parameter to a different component through Vue's router-link

I have a component designed to showcase recipes in a list format. Each recipe is rendered using a separate component from an array of recipes. I am currently attempting to pass the recipe object from one component to another component using Router-Link ...

The CSS for the ajax call functions correctly on desktop devices but is not displaying properly on mobile devices

My ajax call is facing an issue where the CSS classes for a loader and overlay are only being applied in desktop view, not mobile view. I am unsure of what mistake I may be making. Can someone help me resolve this problem? Here is the ajax call: function ...

Is there an improved method for toggling animations in CSS using jQuery compared to my current approach?

Looking to create a toggle effect for a dropdown box that appears and disappears when a button is clicked. var clickState = false; $("#show").on("click", function() { if (!clickState) { $(".animated").removeClass("off"); refreshElement($(".an ...

Arrange fixed-position elements so that they adhere to the boundaries of their adjacent siblings

Is there a way to keep two fixed elements aligned with their sibling element on window resize? <div class="left-img"> IMAGE HERE </div> <!-- fixed positioned --> <div class="container"> Lorem ipsum... </div> <div class=" ...