The Anchor Tag doesn't appear to be compatible with Bootstrap Modal

Can anyone help me troubleshoot an issue with using modals in my HTML? I've been trying to implement them with anchor tags, but it's not working as expected. Here is the code I'm using:

    <div class="logo">MAIN</div>

    <ul>

        <li>
            <a href="#" class="navy-item">3</a>
            <div class="navy-content">
                <div class="navy-sub">
                    <ul>
                        <li>
                            <a data-toggle="modal" href="#myModal">3-1</a>
                        </li>
                        <li>
                            <a href="#">3-2</a>
                              </li>

    </ul>
    <span class="close-my">&times;</span>
    <span class="close-my">&boxH;</span>
    <span class="close-my">&minus;</span>

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->

          <div class="modal-content">

            <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal">&times;</button>

              <h4 class="modal-title">Modal Header</h4>
            </div>

            <div class="modal-body">

              <p>Some text in the modal.</p>

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>

I am utilizing the Darkly Theme for Bootstrap elements, and everything else seems to be working smoothly except this particular issue. If you're interested, you can check out the theme here:

htmlcssbootstrap-4bootstrap-modal

Answer №1

To make the modal functional, remember to include the id, specifically myModal, in the modal you want to target:

<a data-toggle="modal" href="#myModal">ANCHOR</a>

<div id="myModal" class="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Insert modal body text here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Update

If your code is not functioning properly, check if there are any issues with the inclusion of bootstrap or jQuery. Your code can run smoothly as demonstrated below:

<link href="https://bootswatch.com/4/darkly/bootstrap.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="logo">MAIN</div>

<ul>
  <li>
    <a href="#" class="navy-item">3</a>
    <div class="navy-content">
      <div class="navy-sub">
        <ul>
          <li>
            <a data-toggle="modal" href="#myModal">3-1</a>
          </li>
          <li>
            <a href="#">3-2</a>
          </li>
        </ul>
        <span class="close-my">&times;</span>
        <span class="close-my">&boxH;</span>
        <span class="close-my">&minus;</span>
        <div class="modal fade" id="myModal" role="dialog">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>

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

Adjust the height attribute of a DIV element within a webpage that contains a "footer"

I'm hoping to achieve a scrollable middle section without the bottom scrollbar, and I prefer a CSS solution over using JavaScript for this. On my website, I have a 150px high div filled with icons and images that needs to be fixed while allowing the r ...

csshtmlheight

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

javascripthtmlcss

What are your methods for testing HTML content on mobile devices?

I prefer using the Brackets editor for development. I can easily check my website on Chrome in desktop mode by entering this URL: http://127.0.0.1:49371/index.html However, I'm having trouble loading it on my iPhone (even though we're using the ...

htmllocalhost

Achieving perfect alignment through the horizontal centering of three flexbox items with identical widths

Struggling to center these 3 items horizontally using flexbox, all of the same width. HTML: <div id="contact_flex_container"> <div id="fb"> <img src="img/contact/fb.png" class="contact_img"> <h3>Title1</h3&g ...

htmlcssflexbox

Achieving consistent height for Bootstrap grid rows with the class h-25

I'm struggling to create a Bootstrap grid that functions like a traditional table with fixed row heights. I've attempted using the h-25 class on each row and overflow-auto on the parent container, but no matter how I adjust the values, it doesn&a ...

bootstrap-4

Although AJAX $.post functions properly in the View, it seems to encounter issues when relocated to a separate .js file. Interestingly, all other JQuery functions work

I have recently delved into MVC, JQuery, and AJAX, and encountered a perplexing issue. After completing the initial development of a practice website, I dedicated time to enhance the interactivity using JQuery. Everything was functioning smoothly until I ...

javascriptjqueryhtmlajaxasp.net-mvc-5

Arranging progress bars between various nodes using HTML and CSS

I am currently facing a challenge in creating a stepping wizard form layout that features a bar at the top of the page. This bar displays a dynamic number of steps (nodes) and progress bars that connect these nodes. However, I am encountering difficulties ...

htmlcsshtml-listsflexbox

Bootstrap for Aligning Text Within Tables

I'm currently in the process of learning how to utilize bootstrap, and I've encountered a challenge. I have created a simple table, but the data for an order I generated is not aligning properly under its respective category. Can anyone offer ass ...

bootstrap-4

How can I achieve a jQuery fade effect when hovering over an element?

I am looking for guidance on how to hide the <img /> tags within this particular structure and then fade them in upon mouseover using jQuery/css. The concept is to have the HTML <img> element hidden initially, only to smoothly fade in when hov ...

jqueryhtmlcssfadein

Retrieve the name of the page instead of the page number using PHP in combination with AJAX

I found a helpful tutorial on using AJAX to load content on a website. However, the tutorial uses generic page names like "page1, page2, page3, etc." and I want to use specific page names like "products, about, etc.". I've been working on the code in ...

javascriptphpjqueryhtmlajax

unable to expand navbar in Angular 5 project with Bootstrap 4

I am encountering an issue with my navigation bar in a project that uses Angular5 and Bootstrap4. The navigation bar is supposed to expand when the screen size is small, as indicated by the navbar-expand-sm class in Bootstrap4. However, the navbar remains ...

htmlcssangulartwitter-bootstrapbootstrap-4

Menu Sliding Down Beyond Container Borders

I am currently working on a jQuery slideDown menu and facing an issue with its width restriction. Despite positioning it to the left with no float, the width seems to be limited. Below is the media query I am using: @media only screen and (min-width: 480 ...

jquerycss

Image with text overlay

In my content, the setup includes the following: <p class="All-Book-Text">Maecenas iaculis, ipsum at tempor placerat, orci ligula aliquam enim, sit amet sagittis turpis enim sit amet lorem. Praesent dapibus pretium felis, et tempus nibh posuere a.&l ...

css

What is an alternative way to submit a form using JavaScript that does not involve the email method?

I'm looking for a way to submit a form without requiring an email address (to protect my privacy and avoid spam). Please note: For privacy reasons, I have omitted my email address. Please refrain from attempting to submit anything through the form. ...

htmlemailemail-spam

Adjustment of Image Placement

I'm describing my desired outcome briefly - I want the inputs in the code to appear in the top left corner of a large image. Despite trying multiple approaches, I have been unable to achieve this layout. When considering 2 columns, the inputs should b ...

htmlcsscss-position

Ways to ensure a button is ready to be clicked

For my beginner chrome extension project, I am facing a specific situation that I need help with. Imagine a scenario where I have a website with a search button. When the button is clicked, two possibilities can arise: A search result appears with a butt ...

javascripthtmlgoogle-chrome-extensionasync-await

Having trouble with CSS styling not applying after website is uploaded to server?

I have taken a basic page template that was originally designed for the rest of my website and customized it to appear more simplistic. The page now consists of an unordered list with a brief paragraph at the top and a logo aligned to the right. While ever ...

cssstyling

After attempting to retrieve local .HTML content with JQuery ajax for the second time, the JavaScript code within index.html appears to be malfunctioning

My apologies for my limited proficiency in English... Currently, I am engaged in phonegap development where I am attempting to utilize JQuery ajax to retrieve local .HTML content and insert this extracted content into the div with the id="next-page" in in ...

jqueryhtmlajaxcordova

Incorporating Local Storage into a To-Do List Application

I followed a tutorial from w3schools to create a custom task list, tweaking the code to fit my requirements. My goal is to ensure that when I click the save button in the toolbar at the top and then refresh the page, the added tasks are preserved. I&apos ...

javascripthtmlcss

Guidelines for utilizing a jQuery array with key-value pairs

Can someone assist me in incorporating a key value array into this jQuery code I found? The current code works well for a single input, but I need to accommodate multiple inputs. jQuery("#btn").on('click', function() { var caretPos = documen ...

jqueryhtmlarrayskey-value