Below is the html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="styles/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascipt" src="js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg"
data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<!-- Modal for file filter -->
<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-primary">Apply</button>
</div>
</div>
</div>
</div>
</body>
</html>
I've already looked up answers for the same question. Solutions for the same recommend loading jquery.js before bootstrap.js. Mine doesn't work inspite of taking care of the same.
EDIT
Am now using bootstrap-3.3.4 and jquery-2.1.3
remove
type="text/javascipt"
from bootstrap.min.js script.
Related
I have the following code copy-pasted from w3schools Modal training page .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
<script>
$(document).ready(function () { $("#myBtn").click(function () { $("#myModal").modal('show'); }); });
</script>
</body>
</html>
I am using MS Visual studio 2019, with Jquery nuget package installed in the project. I simply copy the code to test it in the razor blank page, execute , then I get nothing apart from the button, when it is clicked , no modal appears.
Nevertheless, that code works for the online html compilers.
Am I missing something here ?
try this
$(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal('show'); }); });
Try to use bootstrap custom attribute to trigger the modal like below:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="myBtn">Open Modal</button>
use data-toggle and data-target in button tag.
I have edited your code. use data-toggle="modal" and data-target="#YOUR_MODAL_ID" in the button to make it work.
Here YOUR_MODAL_ID=myModal
Example using from HTML tag
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
data-target="#myModal"
id="myBtn"
>
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
</body>
</html>
Example using with Javascript (jQuery)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button
type="button"
class="btn btn-info btn-lg"
id="myBtn"
>
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
<script>
$(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal('show'); }); });
</script>
</body>
</html>
Problem solved :
Just added :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Now the modal is show upon clicking the button.
The code works on Visual studio and looks like this now :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-info btn-lg"
id="myBtn">
Open Modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
</div>
<script>
$(document).ready(function () { $("#myBtn").click(function () { $("#myModal").modal('show'); }); });
</script>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Small Modal</h2>
<!-- 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" id="myModal" role="dialog">
<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>
</body>
</html>
here the data model should dismiss only after click cancel button .its data-dismisses when we click any side in screen .How to make this using Jquery /java script
Add data-backdrop property to your modal
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static>
In jQuery inside your onClick pass the modal id and do the following
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
Please find the code snippet below:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
<html lang="en">
<head>
<title>Bootstrap 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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Small Modal</h2>
<!-- 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" id="myModal" role="dialog">
<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>
</body>
</html>
Or have a look at this.
I have scanned several other posts relating to this, but I cannot work out a working solution sadly.
Any help greatly appreciated.
I am trying to stop the modals flashing visibility briefly while the page is loading. I have a 3D model that loads using OpenwebGL, so need a few seconds to load. The modals flashing at the start looks untidy.
I'm not sure of the best approach to stop the modals from loading until the 3d model has finished loading.
This is the HTML code for the page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
</head>
<body>
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal01" role="dialog" >
<div class="modal-dialog" style="display:none">
<!-- 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal02" 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>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Me again.
Ok appreciate a lot of questions on the forum regarding this topic, but didn't find an easy fit.
I eventually figured out a solution using the following from various ideas combined.
So for anyone else trying to fix this issue in the future try the following:
Put the modal div's in a new div. Make the parent div invisible using a style comment in the header. Add this to the opening body comment onload="showdiv();",
Then add a function showdiv script at the bottom of your body.
Here is the same HTML above with the new adjustments:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D Web Interactive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta property="og:image" content="https://cdn.soft8soft.com/images/player_socials.jpg">
<meta property="og:type" content="website">
<meta name="generator" content="Verge3D 3.0.1">
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="media/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="media/favicon-16x16.png">
<link rel="manifest" href="media/manifest.json">
<link rel="mask-icon" href="media/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<script src="ie_compat.js"></script>
<script src="webxr-polyfill.js"></script>
<script>var polyfill = new WebXRPolyfill();</script>
<script src="ammo.js"></script>
<script src="v3d.js"></script>
<script src="City_20_01c.js"></script>
<link rel="stylesheet" type="text/css" href="City_20_01c.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.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://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
#modaloff {
visibility: hidden;
}
</style>
</head>
<body onload="showdiv();">
<div id="container">
<div id="fullscreen_button" class="fullscreen-button fullscreen-open" title="Toggle fullscreen mode"></div>
</div>
<div id="modaloff">
<div class="container" id="modaloff01" >
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal01" 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>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Modal Example 02</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal02" 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 02</h4>
</div>
<div class="modal-body">
<p>Automotive 02</p>
<p>Add any html and CSS Element here. Images , Video, Text, etc</p>
</br>
<img src="http://avologypro.com/wp/expleo/wp-content/uploads/2020/02/Screenshot-2020-02-09-13.25.13.png" width="325px" height="170px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function showdiv() {
setTimeout(function () {
document.getElementById("modaloff").style.visibility = "visible";
}, 5000);
}
</script>
</body>
</html>
So I thought I'd give you my code to explain what my issue is..
<!DOCTYPE html>
<html>
<head>
<title>User Guide</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</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>
<footer>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script src="modal.js"></script>
</footer>
</body>
</html>
There it is. but for some reason, the bootstrap js script isn't running so when I click the button nothing is happening...
anybody able to give me a hand?
Thanks,
Jonathan
It's because you're using a protocol-relative URL for jQuery. You should be seeing errors in the browser's console.
Try changing:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
to:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
When you open a file locally in your browser (outside of a web server) most browser's will use the file:// protocol, so //code.jquery.com/jquery-1.11.3.min.js becomes file://code.jquery.com/jquery-1.11.3.min.js and odds are that you don't have jQuery that location.
These are all my linked Javascript files:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="bootstrap/docs/assets/js/jquery.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-transition.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-button.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-collapse.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-carousel.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-typeahead.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap-affix.js"></script>
<script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>
<script src="bootstrap/docs/assets/js/holder/holder.js"></script>
<script src="bootstrap/docs/assets/js/google-code-prettify/prettify.js"></script>
<script src="bootstrap/assets/js/application.js"></script>
These are all my linked CSS files:
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<link href="css/style.css" rel="stylesheet" media="all" />
And here is my Model:
<!-- 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>
The problem that I am having is that when I click on the button to launch the Model it only pops up on my screen for 1 second then it disappears. For some reason it's not staying on the screen.
hey it is working fine for me. Jsfiddle demo
more over you only need to add any one of bootstrap.css or bootstrap.min.css.
actually bootstrap.min.css is just a compressed version of bootstrap.css.
you don't need to add all javascript files.
a basic example:
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" media="all" />
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<!-- 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>
to test it, just copy the above code into a text-editor and save it as **.html, then just open it on some browser
I found out my problem. I needed to delete
<script src="bootstrap/docs/assets/js/bootstrap.min.js"></script>
Guess you can't include the bootstrap.min.js