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>
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 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
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>
I am new in MVC5, I have taken this snippet of code from w3schools and made changes according to my need but it is not showing modal on button click. Please guide where I am missing...
References in my Master View
Head
<!--Start Bootstrap-->
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/CustomBootStrap.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<!--End Bootstrap-->
<!--Start Scripts-->
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/CustomJavaScript.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-2.2.1.js"></script>
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<script src="~/Scripts/_references.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/respond.min.js"></script>
<script src="~/Scripts/respond.js"></script>
<!--End Scripts-->
Body
<div class="panel">
<div class="panel-heading div-bgGreen div-textWhite text-center"><span style="font-weight:600;" class="text-center">Recent Activities</span></div>
<div class="panel-body">
Panel Content
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade bootstrap" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I have given all the references but why it was not showing modal. When I use "Pavan Teja"'s :-) given code, it worked for me. Pavan Teja's code also have those references. please let me know what is the reason behind this.
Regards
you have to include jquery and bootstrap.js to make it work.markup you provided is correct.
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
<!-- Modal -->
<div class="modal fade bootstrap" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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>This is a small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
you have multiple jquery and bootstrap.js files included in file.you just need one refrence.change it to this.and bootstrap.js shoulb be after jquery.
<script src="~/Scripts/jquery-2.2.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
<script src="~/Scripts/CustomJavaScript.js"></script>
<script src="~/Scripts/_references.js"></script>
<script src="~/Scripts/jquery.validate-vsdoc.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/respond.min.js"></script>
I try to use modal from bootstrap, but instead of a button i would like to use an image. But i don't see at all how to do it. And where to insert
data-toggle="modal" data-target="#myModal
http://getbootstrap.com/javascript/#modals
bootstrap modal
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
You can place the image inside a link like this...
<a data-toggle="modal" data-target="#myModal">
<img src="//placehold.it/100x30">
</a>
Demo: http://bootply.com/98748
You can keep the button HTML and add a background image to the CSS. See the example in this Stackoverflow question.