Issue with modal window not displaying upon click

I am currently navigating my way through Bootstrap and jQuery as a newbie, attempting to incorporate a modal window into my sales website. To visualize how it would appear in my project, I took the modal code from https://getbootstrap.com/docs/4.3/components/modal/. Unfortunately, whenever I click the modal button, nothing appears. There might be an issue with jQuery not being loaded in my code, but I am unsure of how to address this problem. Here is the snippet of my code:

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
...
...
...
    </div>
  </div>
  <br>
  <br>
  <br>
  <br>
  <br>
  
  <!-- Footer -->
  <div class="container-fluid footercontainer">
    <div class="row">

    </div>
  </div>
    


    <script type="text/javascript" src="project2-2.js">
    </script> -->
  </body>
</html>

CSS

@font-face {
...
...
...
}

Answer №1

If you have only imported the CSS of Bootstrap 4, you may encounter issues with the modal functionality as it also requires Javascript to work properly.

To resolve this, you will need to import the JS of Bootstrap 4 along with jQuery and Popper. Here are the lines of code you should add before importing your project's js file:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

Changing the name of a CSS file on the live server

I was recently browsing a website and noticed that they had given their CSS file a really long name. The website in question is It seems like they are using Twitter Bootstrap as their web UI framework, so I'm curious as to why they would choose such ...

Position image/icon within navigation bar

I am currently working on a school project to create a webpage, but I am struggling to align an image/icon with the other buttons in the navbar. Despite my efforts to find a solution through Google searches, I have not been able to resolve this issue. Furt ...

What is the best way to style a tooltip in an ASP.NET application using CSS?

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { foreach (TableCell cell in e.Row.Cells) { ...

Scrollbar issue and splitting line in half

I am writing some CSS code below. I am trying to achieve horizontal scrolling, but if the sentence is too long, it breaks and displays on the next line. In the image, I want "aaaa.." to be displayed on only one line and "bbb.." on the second line, ...

What is the best way to make sure every HTML element on this page is perfectly centered on the screen?

To center the dropdownlist and the three textareas on the screen instead of sticking to the left, you can adjust the CSS by adding the following styles: Add "text-align: center;" to the parent container to center align the elements. Add "display: inline- ...

Tips for placing an icon within an input field

I'm struggling to place an icon inside an input tag, but it always appears at the bottom of the input. I initially tried using Bootstrap, but I ended up resorting to custom styles for this specific issue. Here's the HTML code: <d ...

Automatically adjusting column heights

I'm currently dynamically creating a group of columns, as demonstrated below: <div *ngFor="let col of colList"> <corp-column [xs]="'12'" [sm]="'6'"> <div class="tile tile-default"> <div cla ...

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

Content on the right floating underneath content on the left

Here is the HTML code snippet I am working with: <div id="main_content"> <div id="left_side> <h1> MY BIG HEADER </h1> </div> <div id="content_area"> SOME CONTENT HERE SOME CONTENT HERE S ...

Align list item span to the center

I have encountered an issue with creating a match list using li and ul tags. Despite applying the center span to a fixed width and the team spans to the remaining space, the widths still appear different. How can I ensure that the team spans have the same ...

Unusual occurrence involving label span and the use of italic font styling

Currently following a Xamarin tutorial on creating a label view. You can check out the tutorial here. Encountered an issue where applying an italic font attribute to text within a span tag does not retain the text size set in the label tag. <StackLayo ...

Always ensure that the full text is responsively aligned to the right of the image

.brand { font-size:1.2em; color:#777 !important; display:inline-block; vertical-align: middle; } .car { display:inline-block; vertical-align: middle; padding:5px 30px 0px 20px; } .car.img { margin:0 !important; width:100% ...

What could be the reason why this LESS CSS is not taking effect?

Why won't this stylesheet load properly? The desired background color is supposed to be similar to cadetblue. You can view my page with the linked home.less.css at: ...

I'm looking to transfer my stringified object into the HTML body. How can I achieve

When sending an HTML file to a client using the res.write() method, I also need to include an object within the HTML. However, when I stringify the object and add it along with the HTML, the JSON object ends up outside of the HTML structure. I require the ...

Create a Bootstrap Modal that is positioned relative to a specific column

My design consists of 3 columns, and I need to insert a modal into the second column. The challenge is ensuring that the modal stays within the confines of the 2nd column when the screen size changes, specifically for desktop sizes ranging from 1922x1080 t ...

Configuring various options on numerous dropdowns using AngularJS

I am looking for a solution to customize dropdowns created through ng-repeat in AngularJS. The number of dropdowns displayed is determined by the data fetched from the database. I want to be able to set an initial option value for each dropdown based on th ...

Prevent strange appearances when using slideDown animation

In my application, I am experiencing an undesirable side effect when using slideDown(). Upon clicking the element, a piece of content is appended to an ancestor. This causes the clicked button to shift to the right and the ones on the left to move slightly ...

How can I align bullets in an unordered list with the left margin of the heading above?

Is there a way to line up the bullets with the left margin of the text above the list? Here's an example: <html> <style> ul.p1 {padding-left: 40px} ul.p2 {padding-left: 0px} </style> <body> <h2&g ...