I am new to Twitter Bootstrap. I am working on a modal panel, but it is not being displayed. It fades the screen, but the modal itself does not appear. I have checked the error console, and there are no errors.
My code is inside the <head> tag; I include the scripts like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo $ruadmin ?>js/bootstrap.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/jquery.tablesorter.js"></script>
<script src="<?php echo $ruadmin ?>js/tablesorter/tables.js"></script>
Modal page:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
<!-- 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">Welcome</h3>
</div>
<div class="modal-body">
<p> Hello </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>
You need use the data-target tag.
Try to replace the href="#myModal" attribute with data-target="#myModal".
Besides, you have put a hide class, I guess it shouldn't be there.
Look at the examples here
Change this:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">Launch demo modal</a>
To this:
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
(remark that changing a tag to button tag is not the answer but it is adding the data-target and data-toggle attribute that does the "work")
Please look at this example:
<!DOCTYPE html >
<html>
<head>
<title>Bootstrap Modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" 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="purchaseLabel">Purchase</h4>
</div>
<div class="modal-body">
sup?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Purchase</button>
</div>
</div>
</div>
</div>
</body>
</html>
I had the same issue, I realized i include the JQUERY library after BOOTSTRAP.
Check to see that in your webpage you add/link first JQUERY and then Bootstrap
In case someone run into this problem and none of the above works, I didn't have the css class fade in the class attribute of my modal
I had the div of my modal like this
<div class="modal" id="AdvanceSearchModal" tabindex="-1" role="dialog">
I added fade class
<div class="modal fade" id="AdvanceSearchModal" tabindex="-1" role="dialog">
and with this the modal opens again
Bootstrap Modal doesn't like Id's that start with a number.
I had a UUID as my data-target and it did not work.
<button data-target="#7CB2ED35-3AE1-44FD-AEA8-D953E5C953D5">Launch Modal</button>
I solved it by pre-pend "M-" before all my UUID's so they're still unique:
<button data-target="#M-7CB2ED35-3AE1-44FD-AEA8-D953E5C953D5">Launch Modal</button>
✌🏻😊
Related
Hi Stack overflow community people
I wanted to set the focus on input when users click on the bootstrap modal window.
I tried the below code but not helping. Any help appreciated.
$('#myModal').on('hidden.bs.modal', function() {
$('#focusMe').focus()
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<label>Foucs Me</label>
<input type="text" id="focusMe">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
...
</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>
<!-- JS code -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
</script>
You just need to add setTimeout() function before calling focus() event for input.
In your code focus() method called right after bootstrap modal get closed, when DOM is not loaded properly.
$('#myModal').on('hidden.bs.modal', function() {
setTimeout(function(){
$('#focusMe').focus();
},100);
});
I've been searching for a while but found no answer to my problem. I'm trying to make a modal but it's not showing up. The code of my modal and the button that triggers the modal are just copy pasted from the official bootstrap site. I don't know what's wrong but if you'd like to know my imports, I've already imported the following (in order):
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" href="js/jquery-2.2.4.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
Please help me.
EDIT
Here's the code of the modal I copied and pasted
<!-- Button trigger modal -->
<button type="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">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></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>
</div>
</div>
Add jQuery and Bootstrap links properly. Using the CDN provided latest versions of the above your example works fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="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">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></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>
</div>
</div>
EDIT
Check that in your style.css you do not override any basic Bootstrap modal class by setting it for example with display:none;
I had the same problem when adding a modal from the example while following a Udacity tutorial on basic html and css. I added these lines of code and it worked:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
I thought for sure that I had included the modal in my customized download of the bootstrap edition so I didn't think they would help, but as soon as I added these lines in the header, it worked as I intended. For a more precise example of how to add this to the header:
<head>
<!--these 3 added imports made the modal work-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<title>MyAwesomeWebpage</title>
</head>
PS Don't forget your other style sheets and javascript documents.
I am trying to figure out how to create an HTML element that is like the JavaScript confirm(); element. I would be fine with just using the JS element, but I am not able to edit the style. Am I able to do this?
Thank You!
You could use Bootstrap alerts for example:
http://getbootstrap.com/javascript/#alerts
There is also http://t4t5.github.io/sweetalert/
Elaborating on Craig's answer, try out the following code to use the Bootstrap framework for an alert that is indeed editable.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal -->
<button type="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">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></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>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
Here's a JSFiddle.
I'm really new to bootstrap and I am trying to add a popup using Modals. I added the code and the scripts, but when you click on the button its not popping up. I can tell something is coming up because the background fades a little but a popup is not coming up. So I need a little bit of help figuring out why its not popping up.
My JavaScript links:
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Code for Modals:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
This is a compatibility issue v2.X vs v3.X
Bootstrap 3.0 New Classes & Elements
Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog
Modal Migration
How to convert from a 2.x to 3.0 modal:
remove .hide from the .modal (it's now hidden by default)
wrap .modal-header .modal-body .modal-footer inside .modal-content
wrap .modal-content inside .modal-dialog
Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'.
Reference
Bootstrap 3 modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
JSFiddle
What I usually do for modals with just JavaScript and Bootstrap is to have an onClick event on the button that executes a JavaScript method that displays the modal.
In your HTML:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction(){
$('#myModal').modal('show')
}
</script>
Just change the function name myFunction to the name you want and myModal to the id of your modal.
Here is the bootstrap docs, where the modal stuff is located, for future reference getbootstrap.com/javascript/
Complete Example using CDN. SO that you can download the latest version from Url
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<body>
<!-- Button trigger modal -->
<button type="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-label="Close"><span aria-hidden="true">×</span></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>
</div>
</div>
</body>
</html>
I'm trying to implement a modal popup on a site using bootstrap. The site is departmental so the only code I've got access to is the body of the site basically (everything else is in php includes for the header, footer, and navigation) I've got the bootstrap.js file included as well as jquery. I'm using the example code on the bootstrap docs. I've got bootstrap tooltips and popovers working but can't figure out why the modal won't work.
<!-- Button to trigger modal -->
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>
When I click the button, the page gets backdropped but the only thing in the modal dialog is the navigation bar (I don't have access to the code for that) and the modal dialog in my code (#myModal) is not displayed at all. I have no idea what's going on. This is one my first web development projects.
I want the modal button to be after a select in a form
<select class="bootstrap-select" name=display>
<?php foreach ($digitalSignageDisplays as $display) { ?>
<option value=<?php echo $display; ?>><?php echo $display; ?></option>
<?php } ?>
</select>
Any help would be greatly appreciated. Could it be a Z-index problem?
Make sure you don't forget to wrap your modal-header , modal-body and modal footer with <div class="modal-dialog"> and <div class="modal-content">
<!DOCTYPE html>
<html>
<head>
<link href="D:/install/bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<a href="#myModal" data-toggle="modal" class="btn btn-primary btn-lg" >Launch demo modal</a>
<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><!-- ./modal-header -->
<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><!-- ./modal-content -->
</div><!-- ./modal-dialog -->
</div><!-- ./modal -->
<script type="text/javascript" src="D:/install/bootstrap-3.0.0/assets/js/jquery.js" ></script>
<script type="text/javascript" src="D:/install/bootstrap-3.0.0/dist/js/bootstrap.min.js" > </script>
</body>
</html>
you Can remove just class hide from 'modal hide fade' and add just modal - content .
Remaining your code is done perfect.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>