I am trying to use Twitter Bootstrap Light-box.
My code :
<html>
<head>
<title>LightBox</title>
<link rel="stylesheet" href="bootstrap-combined.min.css" />
<link rel="stylesheet" href="bootstrap-lightbox.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h2>HELLO</h2>
<div id="lightBoxId" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="lightbox-content">
<img src="cubsimba141.gif" />
<div class="lightbox-caption">
<p>This is test image</p>
</div>
</div>
</div>
<a data-toggle="lightbox" href="#lightBoxId" class="span2 thumbnail">
<img src="cubsimba141.gif" />
</a>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-lightbox.js"></script>
</body>
</html>
Above code able to show me Light-Box after clicking on thumbnail image. When I click outside that light box it's need to hide that light-box, but it's not working for me.
UPDATE I fixed your code. I had to change the html for the modal. Have a look at this updated link. Also attaching the code below.
Javascript
$(document).ready(function(){
$(".toggle-modal").click(function(){
$("#myModal").modal('toggle');
});
});
HTML
<h1>Modal Simple Demo</h1>
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">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>
</div>
It seems that you forgot to make it functional with javascript. I created this demo. Have a look... Demo Link.
Related
How can we minimize a modal window created using materializecss.
Here is a working fiddle.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Close !!
</div>
</div>
Jquery
$(document).ready(function(){
$('.modal-trigger').leanModal({
dismissible: false
});
});
I created an html page with bootstrap's modal code (copied from Bootstrap's website. I notice that the modal doesn't show unless I call modal('show'). Why? Shouldn't the browser interpret the html and display the modal box? The following code doesn't show the modal but if you comment the script at the end, it will show the modal
<!DOCTYPE html>
<html lang="en">
<head>
<base href="">
<title>Example</title>
<!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"-->
<link rel="stylesheet" media="screen" href="fiddle.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="fiddle.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
<body>
Did you see the dialog box?
<div class="modal" tabindex="-1" role="dialog" id="mydialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<¬- UNCOMMENT THIS AND THE MODAL WILL SHOW-->
<!--script>
$('#mydialog').modal('show');
</script-->
</body>
Bootstrap modal is designed for trigger the modal window when you click on the element(i.e. a button or a link) with following attributes:
data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal
In your code, no click event occurs and thus modal was not open bydefault
It looks like you want to open modal when page load as the modal is not designed to open on page load you have to manually trigger modal's show Method
since modal works if you clicked on a button to toggle display
this example works fine
see this link https://getbootstrap.com/docs/4.0/components/modal/#live-demo
You can Use this bootstrap modal code this is working fine.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
That is because modaldiv with the class of modal has a display property set to none by default.
Comment the script and inspect the modal in your browser you will notice that it has a display of none.
When you call .modal() and pass in the parameter show on your modal id, then it's display property gets set to block, which is when you are able to see it.
This is because modals are not supposed to be shown by default but instead on a user event so you can call .modal('show)` on the event.
$('#mydialog').modal('show');
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<body>
Did you see the dialog box?
<div class="modal" tabindex="-1" role="dialog" id="mydialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
i think it was happen because in head tag you join jquery and bootstrap librrary so your don’t need you code anymore because bootstrap do this for you..
I have tried this with bootstrap 3 and it worked fine. I'm trying the same thing with bootstrap 4 and the modal does not appear when i click the both buttons created through the anchor tag.
I have seen similar posts with the same problem, however theirs mostly relates to mistakenly using the . for a class reference opposed to # for ID. But this is not the case for me, i have also tried links to the actual modal.css and scripts to modal.js file but those have not worked either.
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
Update Username
Update Password
<!-- Modal -->
<div id="usernameModal" 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">Change Username</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>
<!-- Modal -->
<div id="passModal" 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">Change Password</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>
</div>
I found out what it is.
You need to add the jquery and the bootstrap.js scripts
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="bootstrap-4.0.0/dist/js/bootstrap.js"></script>
Your code have two bug! please close this tag:
<div id="updateCred">
....
</div>
Then please correct "data-toggle" into this line :
<a href="#usernameModal" class="btn btn-lg btn-light" data-toggle="modal" data-
target="#usernameModal">Update Username</a>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<a href="#usernameModal" class="btn btn-lg btn-light"
data-toggle="modal" data-target="#usernameModal">Update Username</a>
<a href="#passModal" class="btn btn-lg btn-light" data-toggle="modal"
data-target="#passModal">Update Password</a>
<!-- Modal -->
<div id="usernameModal" 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">Change Username</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>
</div>
<!-- Modal -->
<div id="passModal" 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">Change Password</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>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<div id="updateCred">
<header>Update Credentials</header>
<p> Please Choose to Update Your Username/Password </p>
<a href="#usernameModal" class="btn btn-lg btn-light" data-
toggle="modal" data-target="#usernameModal">Update Username</a>
<a href="#passModal" class="btn btn-lg btn-light" data-toggle="modal"
data-target="#passModal">Update Password</a>
<!-- Modal -->
<div id="usernameModal" 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">Change Username</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>
</div>
<!-- Modal -->
<div id="passModal" 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">Change Password</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>
</div>
</body>
</html>
When I click link,
<a href="#" data-toggle="modal" data-target="#report">
It shows modal well in 1-2 seconds but after that, the modal load page again. So, the content of modal is replaced by the page it loaded. Why?
<div id="report" class="modal fade" role="dialog">
<div class="modal-dialog">
<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>
This is probably because you are using the a tag with a href attribute to open the modal. It will then replace the modal with the content of your href, which is the current page. Try to use a button or something to open your modal:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#report">Launch modal</button>
EDIT: for the ones that don't believe this is possible and are downvoting me, here is jsfiddle with shows exactly the same behavior that #thai6070 is describing in his question.. This option is deprecated in newer versions of bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Paste this code into your head tag.
I am trying to create a simple interface with Bootstrap. I have a small page with a few things. It works just fine, but then I wanted to add a modal element to it. I took the example directly from the second bootstrap example. But when I try to use it only the shadow appears, which because the buttons don't appear I can't exit out of it.
Why can't I get the modal to work?
Initial code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row border-top-bottom">
<div class="col-sm-1">
<h5>WEEK 1</h5>
</div>
<div class="col-sm-2 border-right">
Launch demo modal
<img src="http://placehold.it/50x50">
<p><img src="http://placehold.it/50x50"></p>
</div>
<div class="col-sm-6">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">This weeks project tittle</h3>
</div>
<div class="panel-body">
<p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.btn').popover();
</script>
</body>
</html>
Added modal code:
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
In your modal code, yyou have class="modal hide fade" I am not sure what the hide portion is for. I think it's from a older version and your using the newer version ?
That prevented the actual modal window from showing. However, here is the proper modal window code, that should work fine.
Replace:
<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 need to load Bootstrap's javascript file to launch the modal. Try adding the bootstrap.min.js file into your head tag like this:
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
You are mixing bootstrap 2.3 and 3.0. They are not compatible.
The html for the modal dialog is from bootstrap 2.3.2
Try changing to this and it should work:
<div id="myModal" class="modal fade" 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>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>