I am completely new to Bootstrap and am trying to work it into an existing jQuery project. I can't seem to get modals to work. I have the following markup from the Bootstrap example at the bottom of my page:
<div class="modal" tabindex="-1" id="message_area">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
My Javascript code is:
$("#message_area").modal();
There are no Javascript errors yet no dialog box pops up. I'm sure I'm missing something.
I stripped down my code to just include jQuery and Bootstrap JS and CSS. Using the example from Bootstrap model page, I still can't get it to work. My stripped down code is:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://dev.adex-intl.com/adex/clientsSite/public/js/jquery.js"></script>
<script src="http://dev.adex-intl.com/adex/clientsSite/public/js/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<link href="http://dev.adex-intl.com/adex/clientsSite/public/css/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<title>Orders** DEVELOPMENT SITE **</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#message_area">
Launch demo modal
</button>
<div class="modal" tabindex="-1" id="message_area" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
Beware of the difference between Bootstrap 4 and bootstrap 5:
You are stating that you use Bootstrap 5, but the toggle and target attributes you use in your button are Bootstrap 4 style.
Replace data-toggle by data-bs-toogle
and data-target by data-bs-target
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#message_area">
Your html page displays the modal correctly once this is fixed, as you can see here (jsfiddle.net). In this example, Bootstrap and JQuery are retrieved via CDN, in order to be sure that the right code is retrieved.
Check the documentations
https://getbootstrap.com/docs/4.6/components/modal/
https://getbootstrap.com/docs/5.0/components/modal/
Also, the placement of your script elements might not be optimal.
See Bootstrap recommendation: https://getbootstrap.com/docs/5.0/getting-started/introduction/#js
Related
I have implemented web component using LIT Element and integrated bootstrap5 in it.
when I try to call modal/popovers/tooltip etc... it is not working.
render(){
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
when I click on button it is not responding.
Can any one help me how to enable the JavaScript functionality in LIT Element.
Thanks in Advance :)
I'm trying to open a modal when an image is clicked with this code here:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
That's the original code from Bootstrap Modal Doc
But yet got it to work, I click the button and nothing happens
May be you missed some bootstrap dependency.
Here is the working full code demo:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Dialog demo -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">
Launch demo modal
</button>
<div class="modal fade" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Woohoo, you're reading this text in a modal!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
I'm trying add a new personal with Modal. Button and Popup code below. But Modal is not work, it is not opening. Where am I doing wrong? Thanks :)
#model Demo.Models.Personal
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>PERSONAL</h2>
<p>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#personalModal">Add Personal</button>
</p>
<div class="modal fade" id="personalModal" tabindex="-1" role="dialog" aria-labelledby="personalModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">New Personal</h2>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</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>
Your code is working on my end, I tried it on my plain ASP.NET MVC template. You can see the screenshot here:
I suggest double check and inspect your site, if you have errors in
your javascript. Make sure you are loading jQuery files and Bootstrap
files.
And make sure you have the proper version, in my side, I am using
Bootstrap v3.3.7 and jQuery JavaScript Library v3.3.1. You can check
info here:
https://getbootstrap.com/docs/3.3/getting-started/#download
Lastly, jQuery should be loaded first before Bootstrap to make it
work.
I am using Bootstrap Modal in ASP.Net MVC Project, it work fine but the problem that the Overlay of Modal cover only the page but not layout page and Navbar,
I have layout page and i am using modal in sub page
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
I am trying to create a Button Group in Bootstrap with 3 buttons.
The last 'Delete' button also has a Modal attached to it. My code looks like this to get the Modal to work.
<div class="btn-group btn-group-sm">
V
E
D
</div>
Above code works and buttons are nicely grouped. The Modal works on the Delete button. But when I do below code to get the tooltip and modal to work on the Delete button, the button is not part of the group anymore and becomes a button on its own.
<div class="btn-group btn-group-sm">
V
E
<span data-toggle="modal" data-target="#deleteModal">
D
</span>
</div>
See my code below and you may find your answer.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Things You Trird<br><br>
<div class="btn-group btn-group-sm">
V
E
<span data-toggle="modal" data-target="#deleteModal">
D
</span>
</div>
<br><br>
<div class="btn-group btn-group-sm">
V
E
D
</div>
<hr>
Things I tried....
<br><br>
<div class="btn-group btn-group-sm">
V
E
<a href="#" class="btn btn-danger" role="button" data-toggle="tooltip" data-placement="top" title="Delete">
<span data-toggle="modal" data-target="#deleteModal">D</span>
</a>
</div>
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>