Tips for making my modal function properly?

I've encountered an issue with adding two modals to my website. The first modal works perfectly fine, but the second one is not functioning as expected. When I click on the button for the second modal, the background dims as it should, but the modal itself does not appear.

Below is the code snippet that includes both modals:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4">
  <ul class="list-inline quicklinks">
    <li class="list-inline-item"><a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Privacy Policy</a>
    </li>
    <li class="list-inline-item"><a href="#bannerformmodal1" data-toggle="modal" data-target="#bannerformmodal1">Terms and conditions</a>
    </li>
  </ul>
</div>
<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <h2 class="text-xs-center">Privacy Policy</h2>
          <div class="col-md-12">
            some text.
          </div>
          <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade bannerformmodal1" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal1" aria-hidden="true" id="bannerformmodal1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          </div>
          <div class="modal-body">
            <h2 class="text-xs-center">Terms and conditions</h2>
            <div class="col-md-12">
              Some text here.
            </div>
            <div class="modal-footer">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>

javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

Make sure to close all your tags properly, here is the revised code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4">
  <ul class="list-inline quicklinks">
    <li class="list-inline-item"><a href="#bannerformmodal" data-toggle="modal" data-target="#bannerformmodal">Privacy Policy</a>
    </li>
    <li class="list-inline-item"><a href="#bannerformmodal1" data-toggle="modal" data-target="#bannerformmodal1">Terms and conditions</a>
    </li>
  </ul>
</div>
<div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <h2 class="text-xs-center">Privacy Policy</h2>
          <div class="col-md-12">
            some text.
          </div>
          <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade bannerformmodal1" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal1" aria-hidden="true" id="bannerformmodal1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div class="modal-body">
          <h2 class="text-xs-center">Terms and conditions</h2>
          <div class="col-md-12">
            Some text here.
          </div>
          <div class="modal-footer">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №2

Remember to always close your div tags properly within the modals.

Maintaining proper indentation can help catch these errors before they become problematic.

If you're unsure, consider using a free online tool like this one to double-check your HTML code.

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

Steps to choose a div element from an Ajax Response utilizing Prototype JS

I attempted to use the code below, but unfortunately I have not been able to achieve success yet. var myAjax = new Ajax.Request( url, { method: 'post', onException: function (xhr, e) { alert('An e ...

javascriptajaxprototypejsprototype

"Encountering errors when attempting to load partials on the server-side

Currently, I am working on creating a basic single page application using the MEAN stack. Everything was running smoothly when I was developing on localhost. However, upon uploading the code to the server, I encountered a status code 500 (Internal Server ...

javascriptangularjsnode.jsmongodbexpress

Ascending to the Peak within a div

<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...

javascriptjqueryhtmlcss

Finding and retrieving specific information from nested arrays within a JSON object can be done by implementing a method that filters the data

I have an array of objects where each object contains a list of users. I need to be able to search for specific users without altering the existing structure. Check out the code on StackBlitz I've tried implementing this functionality, but it's ...

javascriptangular

What is the best way to obtain root access and utilize disk usage (du) within the main process of Electron?

In the process of developing a macOS application with the help of Electron, I encountered an issue. Attempting to execute the following command from the main process using ipcMain and NodeJS's exec: // Navigating to a directory and utilizing disk us ...

javascriptnode.jsmacosunixelectron

The height of the div unexpectedly adjusts after content is displayed on hover

Within my anchor tag, there are two elements: a fontawesome Icon and a hidden span that only appears when the anchor is hovered over. The problem arises on my website when the hidden span is displayed inline causing the parent anchor to increase in height. ...

htmlcssbootstrap-5

What steps can I take to ensure that only one panel is opened or expanded at any given time?

Introducing a versatile component/function that showcases a expandable card feature triggered by a button. The <Viewmore> component serves as an image placeholder, essential for SVG images utilization. import React, { useState, useRef } from "re ...

javascriptreactjsuser-interface

What is the best method to fetch a specific post from supabase for showcasing in a dynamic Route with Nextjs14?

I'm currently working on a Next.js application where I am fetching posts from a Supabase database. Everything works fine when retrieving all posts, but when trying to retrieve a single post dynamically using the ID, the screen displays null. Here&apos ...

javascriptnext.jsroutesdynamicsupabase

creating a div that functions similarly to a radio button

Is it possible to create a div that mimics the behavior of a radio button? I'm looking for a solution that doesn't involve jquery, as many people have recommended. After doing some research, I found a few potential options. In the past, I'v ...

javascripthtmlcss

Problem with using puppeteer to interact with a dropdown menu

I have a project in which I am utilizing puppeteer to create a bot that can automatically check for my college homework assignments. The problem I am encountering is that when the bot tries to click on a dropdown menu, it fails and I receive an error messa ...

javascriptjsonnpmpuppeteer

When the page loads, the jQuery .click event is triggered

Having trouble with a jQuery script stored externally that updates a database. Despite setting it to run on button click, the database updates only when the page refreshes. Any ideas why? Thanks! $('#add').click( $.ajax({ url: ' ...

javascriptjquery

Save OpenLayers map as a PNG file using a personalized file name

I am trying to save my map as a .png image but I am encountering some difficulties. The code I have been using is supposed to allow me to do so, but it seems like there might be something missing because I cannot save the image under a custom name. documen ...

javascriptpngopenlayers

reposition md-dialog labels on the fly

My tab dialog is not evenly arranged as shown below: https://i.sstatic.net/ghn4v.jpg Despite trying the flex directive, the tabs ("DESCRIPTION, MEANS,...) do not span the available space uniformly. Here is a shortened version of my HTML: <md-t ...

javascripthtmlangularjsflexboxangular-material

How can I make CSS images appear beside specific links?

Currently, I have implemented the following CSS: .entry a { padding: 2px 0 0 8px; background: transparent url(images/link_arrow_light.gif) left top no-repeat; text-decoration: underline; } It is functioning correctly, but the image is being added t ...

cssimagehyperlink

Need assistance with passing a model and a string in MVC5?

Below is the code snippet I am working with: JavaScript: $(document).ready(function () { //Thing is model var things = [ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red&a ...

jqueryajaxasp.net-mvcc#-4.0

How can I add rows to the tbody of a table that is already inside a div container?

I have an existing table and I want to append a tbody element to it. Below is an example of the HTML table: <div id="myDiv"> <table class="myTable"> <thead> <tr> <th>ID</th> ...

javascriptjqueryhtmlcss

What is the best way to integrate a basic jQuery script into WordPress?

After reading through the Codex and various blog posts on implementing jQuery in WordPress, I find it quite frustrating. I managed to successfully load jQuery in the functions.php file, but the available guides are not very helpful as they seem to assume a ...

jquerywordpress

Bug in scroll animation accumulation

Hey everyone, I've been exploring a plugin developed by Zach Dunn which can be found at https://github.com/buildinternet/totem. I'm encountering some issues with the animation when clicking on the next and previous links. I've attempted usin ...

jqueryscrolljquery-animate

Error: The server selection process has encountered an unexpected issue

Embarking on my journey with MongoDB and the MERN stack, I turned to these tutorials for guidance: https://medium.com/@beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1 https://www.youtube.com/watch?v=7CqJlxBYj-M ...

javascriptnode.jsmongodbexpressmongoose

Easiest and quickest method to retrieve metadata from a website

Currently, I am using preg_match to extract the 'title' from websites, however, it is loading very slowly. Here is what I have so far: This code sends links to a function: <?php foreach($savedLinks as $s) { echo "<div class='sa ...

phphtmlpreg-matchmetadata