Issue with Bootstrap Modal failing to display the dialog box

I have been attempting to incorporate a Bootstrap Modal for quite some time now. Despite following the guidelines in the bootstrap documentation, I am still unable to get it to work properly. Any ideas why this jsfiddle link is not functioning as expected?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

javascriptcsshtmltwitter-bootstrap-3bootstrap-4

Answer №1

To successfully launch bootstrap, jquery must be utilized. Refer to the updated code snippet below and access it on jsfiddle

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></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

Placing the date of each blog post at the end of the excerpt

Currently, there is a grid section on the homepage of our site showcasing the two most recent blog posts. I am looking for a Javascript solution to relocate the date to the bottom of each block, outside of the border. For reference, you can visit the follo ...

javascriptjqueryhtmlcsswordpress

Utilize Multidimensional Arrays in HTML

I have a pair of fields called url and id. <input type='url' name='data[web][url]'><input type='number' name='data[web][id]'> <input type='url' name='data[web][url]'><input t ...

phphtmlarrays

I have a task to create a program that can extract unique elements from an existing array and add them to a new array

I am in the process of creating a code snippet that will extract unique elements from an array and store them in a new array. My approach involves developing two custom functions, similar to .includes and .push. The arrIncludesTest function is designed to ...

javascriptnode.jsarrays

Utilizing jQuery to Execute a Function Upon Addition or Removal of Class Names

Currently, I am working on a function that includes a conditional statement to display an alert when a specific class name is removed from a div layer. Below is the code snippet: <div class="ui-tabs-panel ui-tabs-hide">panel</div> <div>& ...

jquerycssfunctionevent-handling

In React hooks, Socket.io has a strange behavior where it adds users multiple times with varying socket IDs

Encountering an issue with my React and Socket.IO application. Upon a user joining a room, their information is being duplicated in the client's array on the client side. Despite having the same username, the entries have different socket IDs assigned ...

javascriptreactjsdebuggingreact-hookssocket.io

Encountering errors when trying to render views in Node/Express is a common

I have set up my nodejs/express application like this; app.set('views', __dirname + './views'); app.set('view engine', 'ejs'); After that, I created a route as shown below app.get('/page/MyPage', functio ...

javascriptnode.jsexpress

Which is the better option for data storage: JSON files or MySQL database?

I am currently developing a project that utilizes the vis.js JavaScript framework to showcase a visual network of various categories. There are approximately 2000 categories available for selection, each with a substantial amount of associated data. I am ...

javascriptmysqljson

"Enhance your website design with the powerful features of

My goal is to 1) align radio buttons to the left 2) reduce the vertical spacing between label and radio button texts as well as between each text In the provided example, the radio button texts are currently centered with excessive space between them, whi ...

vue.jsbootstrap-4radio-buttonbootstrap-vue

Is it possible to establish a delay for requestAnimationFrame()?

My webpage has a very long layout with text in one column and a floating element in another. I want the floating element to follow the scroll of the window and return to its original offset once scrolling stops. The current code I have is: var ticking = ...

javascriptcssscrollrequestanimationframe

Methods for setting the value of a scope variable within a controller's function

I have a goal of presenting a page that calculates a balance in the background and displays it. To achieve this, I decided to separate the balance into its own directive. Here is the directive I have created: app.directive('smBalanceInfo', fun ...

javascripthtmlangularjsangularjs-directivepromise

sending information through PHP and HTML

Trying to transfer data from a table search to another PHP page, here is the code: echo " 1<form action='adm_edit.php?product_code=$record[0]' method='POST'> 2<input type=submit value=Edit> 3</form> 4<form action= ...

phphtmlxhtml

Struggling to adjust the width of a div accurately following the population of AJAX content

This particular piece of code is responsible for populating an inner div within an image slider by making an Ajax call : $.ajax({ type: "GET", dataType: 'json', url: $(this).attr('href') }).done(function (result) { ...

javascriptjquerycssajax

Ways to ensure that the form data stays consistent and visible to the user continuously

Is there a way to ensure that the user submits the form, stores it in a MYSQL database, and then displays the same submitted data in the form field? <div class="form-group"> <label class="control-label col-sm-2" for="lname">Last Name*</l ...

javascriptphpmysqlajaxforms

Utilizing AngularJS's $http.get to fetch video IDs and then combining them with the /embed endpoint through the ng

Currently, I am utilizing $http.get to retrieve a list of videos from YouTube using the API endpoint 'MY_API_KEY'. The goal is to construct a link with the video ID in the format: "{{videoID}}". However, extracting the videoID proves to be chall ...

javascriptangularjsiframevideoyoutube

Looking to activate a bootstrap grid breakpoint when a div reaches a specified min-width

I have a webpage layout structured within a Bootstrap grid. In desktop view, one div (divDesktopDiv) is shown, and in mobile view, it is replaced by another div (divMobileDiv). However, my current setup causes the divDesktopDiv to overflow into the neighb ...

csstwitter-bootstrapresponsive-design

Populating multiple divs with the same id using Ajax and JSON data

My ajax request is retrieving a JSON value from a PHP page, like so: {"Inboxunreadmessage":4} Below is the JavaScript I am using for my ajax request: $(window).load(function(){ $.ajax({ dataType: "json", type: "POST", url: "/ ...

javascriptphpjqueryjsonajax

Incorporating PHP in JS/jQuery AJAX for creating unique odd and even conditional layouts

My PHP code includes a loop that changes the layout of elements based on whether the $count variable is odd or even. For odd counts, an image appears on the left and text on the right. For even counts, it's the other way around. To load content dynam ...

javascriptphpjqueryajax

Efficiently encode and decode JSON data between PHP and JavaScript

I am attempting to convert my array results into JSON format and then transmit them to an AJAX success event using JavaScript. PHP $results = array( "time1" => 1, "time2" => 2, ); echo json_encode($results); JAVASCRIPT ...

phpjavascriptjqueryajaxjson

What could be preventing the registered user from being authenticated in Firebase? Why are they unable to successfully upload products to the Firebase database?

How can I enable the owner, who is authenticated, to add or modify products in my project? What steps should I take to allow registered users to add products to the catalog from the Administrator Panel? I have developed a web application using npx create ...

javascriptreactjsfirebasefirebase-authenticationreact-router

Show a Toast in React without relying on useEffect to manage the state

I have successfully implemented the Toast functionality from react-bootstrap into my application using the provided code. However, I am unsure if it is necessary to utilize useEffect to set show with setShow(items.length > 0);. Would it be simpler to ...

javascriptreactjstypescriptreact-hooks