clicking on the anchor does not trigger the modal to open

Below is an anchor tag I have set up:

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

Here is the structure of my modal:

<!-- Modal -->
 <div class="modal fade" id="modalTC" 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>

You can check out the Fiddle as well.

If there are any issues, please let me know. PS: I have all the necessary files including Bootstrap and Jquery.

jqueryhtmlcsstwitter-bootstrap

Answer №1

Ensure that bootstrap.min.js is being called after jquery.min.js.

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

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>


<!-- Modal -->
 <div class="modal fade" id="modalTC" 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>

Answer №2

Your system is running smoothly. Here's a helpful tip:

<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>

Check out this functional Fiddle

It seems like you may have overlooked the inclusion of JS and CSS in your code.

Answer №3

Make sure to load Bootstrap before jQuery in your code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="#" data-toggle="modal" data-target="#modalTC">terms and conditions</a>


<!-- Modal -->
 <div class="modal fade" id="modalTC" 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>

Answer №4

Make sure to include the jQuery library before bootstrap.min.js in your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Check out this working fiddle

I hope this information proves helpful.

Answer №5

It is essential to include the jquery file before adding the bootstrap.js file to your code. Here is the link to your updated fiddle: 

jsfiddle.net/dssoft32/ehmepvya/2/

Bootstrap relies on jquery, making it necessary to import jquery before bootstrap. The order in which files are imported is crucial in javascript development.

Answer №6

Make sure you have bootstrap and jquery included in your project. I recently added 

<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

and it's working perfectly.

Answer №7

Check out this suggestion:

<a href="#" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Open demo modal </a>

OR visit this link for more information: https://getbootstrap.com/javascript/#modals

Also, remember to include jQuery before using the modal functionality to ensure it works correctly.

Answer №8

To enhance your webpage, incorporate the following code and include the three essential files bootstrap.min.css, jquery.min.js, bootstrap.min.js from your local directory.

<!DOCTYPE html>
<html lang="en-US>
  <head>
    <title>Bootstrap Showcase</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <script src="js/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h3>Modal Demo</h3>
      <!-- Trigger the modal with a button -->
      <a href="#" data-toggle="modal" data-target="#modalTC">view terms and conditions</a>
     <!-- Modal -->
     <div class="modal fade" id="modalTC" 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>Your custom modal content here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
       </div>
      </div>
     </div>
    </div>
  </body>
</html>

​

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

Incorporating a loading animation with an AJAX call

I've come across various solutions to this issue, one of the most enlightening being a response on Stack Overflow suggesting to "display it as soon as you initiate the AJAX call" and then "hide the image once the request is complete." But how would I ...

javascriptjqueryajax

Obtaining values from alternating nodes in a SQL query

Can anyone help with extracting values of odd and even nodes in SQL from this XML example? declare @htmlXML xml = N'<div class="screen_specs_container "><div class="left_specs_container">Compatibility:</div><div class="right_spe ...

htmlsqlsql-server

What is causing the role="status" attribute to malfunction?

I'm having an issue with the role="status" attribute in my code. When using a screen reader, the paragraph text doesn't get read once it's appended to the body. index.html: <!DOCTYPE html> <html> <head> <title> ...

javascripthtmlaccessibility

Delete the hidden attribute from an HTML element using a JavaScript function

Hey there! I have a question for you. Can you assist me in removing an attribute (Hidden) using an Input type button? Here is the script: Thank you for your help! <input type="button" onclick="myfunction()" value="Test"> <hr> <button id= ...

javascripthtml

Currently, I am encountering challenges with the navigation menu on my website. The technologies I am utilizing for this project include Bootstrap 3, JQuery 2.3.1, Jade, ExpressJS

Greetings! I am diving into the world of Jade templating for Node.js and embarking on a journey to create a basic starter application using Express 4, JQuery, Bootstrap 3, and Jade. I encountered an issue while attempting to incorporate the navbar into my ...

jquerynode.jsexpresstwitter-bootstrap-3pug

How to Modify Button Backgrounds in Angular 8 after Click Events?

Within my Angular 8 Component, I have implemented a row of 4 buttons using the ant design (antd) library in HTML. My Objective: I aim to modify the background-color of a button when it is clicked. The previously clicked button should revert to its origin ...

htmlcssbuttonangular8background-color

What is the best way to resume a Jquery function if it has not

How do I make my form alert re-trigger when the user clicks the button again if the input is still empty? What I've tried: After clicking the button, it checks if the inputs are empty and shows an alert. However, once the alert appears, if I click th ...

javascriptjquery

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Need help with adjusting two columns on a webpage? The right column is fixed at 300px width, while the left column should take up the remaining space. Using flex works well, but when adding a responsive ad to the left column, it extends beyond the availabl ...

cssbootstrap-4

Slider malfunctioning following AJAX loading

After the user clicks on #mail-wrap, I am attempting to trigger the ready event which loads another page with AJAX so that sss() can be refired. Despite my efforts, it seems like it is not working as expected. Can you help me identify what might be going w ...

javascriptjqueryajax

Steps for changing the direction of a dropdown menu to the left instead of the right

I'm having a bit of an issue with my inbox setup. I have a dropdown for it, but the dropdown is appearing off to the right and since it's at the end of my top navbar, it's not very visible. Here is the CSS code for the inbox: .notification ...

htmlcss

Include category to the smallest element

I am attempting to use JQuery to find the height of the tallest element and then add that height to other elements that are shorter. My goal is to assign the class, main-nav-special-padding, to these shorter elements using my current JQuery code. I tried t ...

javascriptjqueryhtmlcss

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

If you're curious about the code, take a look here! Here are some of the issues I'm facing: The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all) When t ...

jqueryhtmlcssipad

Maintain the markup created by jQuery inside the AJAX function called by setInterval

In the code snippet below, real-time markup is generated and automatically updates using the setInterval function. The markup includes buttons and hidden content within div elements. Each button reveals its corresponding div, but the div reverts to a hid ...

javascriptjqueryhtmlcssajax

Loading Datatables using PHP to send JSON data

I seem to be facing some difficulty in troubleshooting the issue within my code. Currently, I am working on a search script and would like to display the results using Datatables. I have a search form that sends data to my PHP file which then returns a JS ...

javascriptphpjqueryjsondatatables

Images on web pages are automatically resized to fit into a smaller preview window

Currently, I am facing an issue with the display of images in my grid windows on my website . The images are appearing as partial representations instead of rescaled versions where the whole picture is resized to fit the grid window. I have attempted mod ...

javascripthtmlcssweb

"Encountering a form submission error - requested resource not located

I am currently trying to submit a form to an MVC controller using AJAX, where the controller is expected to take a form collection. I came across this helpful resource on Stack Overflow regarding passing formcollection using ajax call to an action. However ...

javascriptjqueryhtmlajaxasp.net-mvc-5

The aoColumns feature in datatables is experiencing a malfunction

Trying to manage the value of aoColumns from another PHP page has been a bit challenging for me. When I use a static value, it works fine, but when trying to retrieve it dynamically, I encounter some issues. $aoColumn = array("null","null","null","{bSorta ...

phpjquerysortingdatatables

I am noticing that my popover is causing my page to shift when I click it. It is expanding the width of my page more than I would

Upon clicking the user id popover on my page, it expands the page width instead of adjusting within the page boundaries. This is the issue: https://i.stack.imgur.com/EqaMo.png There's a small white space present that I want to eliminate. When the po ...

javascriptcssreactjsmaterial-uipopover

having numerous collapsible elements that trigger a single django view function, each one submitting a distinct value

I have multiple collapsible items that need to trigger the same Django function when submitted with different values. https://i.sstatic.net/1BO19.png Is there a way to achieve this without using a dropdown menu in Django forms? What modifications should ...

pythonhtmldjango

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss