Having trouble with displaying a Bootstrap modal in HTML and CSS?

I am new to programming and facing a challenge with my modal not displaying as expected. Instead of appearing in a popup, it is showing on the page itself. I really need help finding a solution for this issue. Any assistance would be highly appreciated. Below is the code snippet:

                                    <div class="info-box">
                                    <h3>M Saifur Rahman</h3>
                                    <span class="instructor-profession">Director,Business Development</span>

                                    <div class="divider"></div>


<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
  <!-- Modal -->
  <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>`enter code here`
          <h4 class="modal-title">M Saifur Rahman,PMP</h4>
        </div>
        <div class="modal-body">
          <p></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>
</div>

Additionally, I have included the necessary links and scripts below:

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

Answer №1

Rearrange the order of importing jquery in your HTML page. It is important to import jquery before bootstrap js because Bootstrapjs relies on jquery to function properly.

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

    <div class="info-box">
        <h3>M Saifur Rahman</h3>
        <span class="instructor-profession">Director, Business Development</span>

        <div class="divider"></div>

        <center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
        <!-- Modal -->
        <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">M Saifur Rahman, PMP</h4>
                    </div>
                    <div class="modal-body">
                        <p>Here goes the body content</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>

            </div>
        </div>
    </div>

Answer №2

To ensure proper functionality, make sure to include the jQuery library before adding Bootstrap JavaScript. This sequence is important as Bootstrap relies on jQuery features.

Answer №3

Hello Saif,

To make the modal appear in your web page using JavaScript, you need to specify the actions that trigger its display. For example, if you want the modal to open when a button is clicked, you should define the necessary commands for that.

$('.open-modal-button').click(function(){ $("#myModal").modal('show'); })

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

Views.py in Django fails to properly retrieve POST request parameters, resulting in a return value

I am struggling to retrieve the value of "taken_name" from an HTML form in Django views using a POST request. Despite trying various solutions found in online forums, I have been unable to identify the simple mistake causing this issue for nearly two hours ...

pythonhtmldjangohttp-post

The material-table is utilizing a component as data, but is failing to pass the component context during the onChange

I attempted to include a component as data in a material table, but I'm facing an issue with accessing the 'this' context of the component to update the state within the onChange function. Unfortunately, the editable feature offered by mater ...

javascriptreactjsmaterial-uimaterial-table

How can JavaScript be used to activate HTML5 AppCache?

<html manifest="example.appcache"> Is it possible to use javascript to include the manifest="example.appcache" part? ...

html

Following the execution of the Ajax function in JavaScript, the functionality of the

My JavaScript validation function checks if an input value is empty. I now want to enhance it by adding a validation that ensures a special input is not being repeated. I have written a PHP function and utilized AJAX for this purpose. The AJAX part seems t ...

javascriptphpjqueryajax

Tips for retrieving data from a database with just one key press

There is a text field that triggers a JavaScript function when a key is pressed. <input type="text" class="text" id="txt_sh_vid" onKeyPress="vhc_record()" maxlength="4"> The function takes the input from the text field and searches for a result in t ...

phpjavascripthtmlajax

What is the ideal usage of promises in ES6 node projects?

The official bluebird promises page suggests that when using node.js, there may not be a need to manually write promises. Recently, while working on a new project, I noticed that my code heavily relies on promises. For instance, I have a databaseConnector ...

javascriptnode.jspromiseecmascript-6es6-promise

Looking to adjust the alignment in BootsFaces? Want to move the final link of the navbar to the right corner?

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.c ...

csshtmlbootsfaces

What is the correct way to implement a callback in the .then() method of Node.js?

I am currently working with a nodejs module that fetches data from a mongodb database using the mongodb driver. The callback is passed to a specific function which returns a promise, but instead of returning the result in the .then() function, it passes th ...

javascriptnode.jsmongodbpromisecallback

Error in crypto: The variable keyWords is throwing a TypeError because it is trying to read the property 'words' of an undefined value

Struggling with a crypto issue here. Seems like the problem lies on line 75 in the saveAccounts function. The 'accounts' variable is most likely empty at this point, as assigned in the getAccounts function. I suspect the issue has to do with the ...

javascriptnode.jsnpmcryptojs

Retrieving the status of a checkbox using jQuery to obtain a value of 1 or

Incorporating jQuery, I am able to retrieve the values of all input fields using the provided code snippet. However, an issue arises when dealing with checkboxes as they return "on" if checked. How can I modify this to receive a value of 1 when a checkbox ...

javascriptjqueryhtml

Displaying an HTML button above JavaScript code

Hello, I am currently working on a project that involves displaying the Earth and I am in need of assistance with positioning some buttons on the screen. Currently, I am facing an issue where the buttons appear either above or below the JavaScript code. I ...

javascriptcsshtmlweb

What is the best way to adjust the size of an SVG path when zooming in Highcharts?

Recently, I developed a module that allows users to draw an svg line over a highchart using the Renderer. However, I encountered an issue where the size and position of the drawn line remain static when the user zooms into the highchart. It is essentia ...

javascriptjquerychartshighcharts

Manipulating and targeting specific elements inside a div using jQuery

I am attempting to target and style all instances of the "picture" element nested inside any divs with a class of "highlights". Below is an excerpt from a webpage showcasing the picture element within a "highlights" div... <div class="row highlights"&g ...

jqueryhtmlcssloops

When creating a new instance of the Date object in Javascript, the constructor will output a date that is

In my project using TypeScript (Angular 5), I encountered the following scenario: let date = new Date(2018, 8, 17, 14, 0); The expected output should be "Fri Aug 17 2018 14:00:00 GMT-0400 (Eastern Daylight Time)", but instead, it is returning: Mon Sep ...

javascriptangulartypescriptdateangular5

Leverage async and await features in TypeScript aiming at ES5 compatibility

Currently working on a TypeScript project that is set to target ES5, I am exploring the feasibility of incorporating async/await functionality. Syntactically, the TypeScript compiler is able to transpile the code without issues. However, it has come to my ...

javascripttypescriptasync-awaitecmascript-5

Selection list with limited comment choices

I am facing a challenge and would greatly appreciate any hints. I am working with a PHP loop to populate comments for a thread, like this: <tr><td>'.comment_date'.</td><td>'.comment_author.'</td><td> ...

javascriptjqueryhtmlajax

Using AJAX to retrieve version information via jQuery

I have a straightforward script that extracts the value of a textarea and sends it via AJAX. When I input "??" as the text, the output seems to be corrupted with strange values. However, when I log out the retrieved value before sending it, everything appe ...

phpjavascriptjquery

To effectively delete the <li> element using JavaScript, make sure to eliminate the associated array object as well

I am in the process of designing a compact landing page that will randomly select a city from user input to determine the next trip destination. When the user types in the city name into the input field, everything functions correctly - a new list element ...

javascriptarraysfunctionloops

What is the solution for the error message "this.filters is not a function" in Vue.js 2?

Here is the code for my component: <script> import _ from 'lodash' export default{ props:['search','category'], data(){ return{ price_min:'', ...

javascriptvue.jslaravel-5.3vuejs2vue-component

Identify a specific HTML template using jQuery

I am currently working on implementing datepickers in various HTML templates. The issue I am facing is that the functionality only seems to work in my index.html file. When I try to replicate the same setup in another template, it does not function proper ...

jqueryhtml