I'm using Twitter Bootstrap modal window functionality. When someone clicks submit on my form, I want to show the modal window upon clicking the "submit button" in the form.
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit"/>
</form>
<!-- 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>
jQuery:
$('#myform').on('submit', function(ev) {
$('#my-modal').modal({
show: 'false'
});
var data = $(this).serializeObject();
json_data = JSON.stringify(data);
$("#results").text(json_data);
$(".modal-body").text(json_data);
// $("#results").text(data);
ev.preventDefault();
});
Bootstrap has a few functions that can be called manually on modals:
$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
You can see more here: Bootstrap modal component
Specifically the methods section.
So you would need to change:
$('#my-modal').modal({
show: 'false'
});
to:
$('#myModal').modal('show');
If you're looking to make a custom popup of your own, here's a suggested video from another community member:
https://www.youtube.com/watch?v=zK4nXa84Km4
Most often, when $('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work.
Remove one of the links to make it work again.
Furthermore, some plugins cause errors too, in this case add
jQuery.noConflict();
$('#myModal').modal('show');
In addition you can use via data attribute
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
In this particular case you don't need to write javascript.
You can see more here: http://getbootstrap.com/2.3.2/javascript.html#modals
Just call the modal method(without passing any parameters) using jQuery selector.
Here is example:
$('#modal').modal();
If you use links's onclick function to call a modal by jQuery, the "href" can't be null.
For example:
... ...
Open a Modal by jQuery
... ...
... ...
<script type="text/javascript">
function openModal(){
$('#myModal').modal();
}
</script>
The Modal can't show.
The right code is :
Open a Modal by jQuery
Here is how to load bootstrap alert as soon as the document is ready. It is very easy just add
$(document).ready(function(){
$("#myModal").modal();
});
I made a demo on W3Schools.
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
<!-- Trigger the modal with a 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(){
$("#myModal").modal();
});
</script>
</body>
</html>
<script type="text/javascript">
$(function () {
$("mybtn").click(function () {
$("#my-modal").modal("show");
});
});
</script>
Try to use jQuery instead of $ sign when calling the function, it worked in my case as you can see below.
jQuery.noConflict();
jQuery('#myModal').modal('show');
jQuery.noConflict(); because when jQuery('#myModal').modal('show'); doesn't work, it's caused by having included jQuery twice. Including jQuery 2 times makes modals not to work. and it would resolve the problem in that case, as in my case it is repeating.
Further you can go to this link
Bootstrap Model Window Not Showing by Calling Through JQuery
Check out the complete solution here:
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h
Make sure to put libraries in required order to get result:
1- First bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(In other words jquery.min.js must be call before bootstrap.min.js)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I tried several methods which failed, but the below worked for me like a charm:
$('#myModal').appendTo("body").modal('show');
Try
$("#myModal").modal("toggle")
To open or close the modal with id myModal.
If the above is not working then it means bootstrap.js has been overridden by some other js file.
Here is a solution
1:- Move bootstrap.js to the bottom so that it will override other js files.
2:- Make sure the order is like below
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
<form id="myform" class="form-wizard">
<h2 class="form-wizard-heading">BootStap Wizard Form</h2>
<input type="text" value=""/>
<input type="submit" id="submitButton"/>
</form>
<!-- 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>
You can launch the modal with the code below this.
$(document).ready(function(){
$("#submitButton").click(function(){
$("#myModal").modal();
});
});
Try This
myModal1 is the id of modal
$('#myModal1').modal({ show: true });
Bootstrap 4.3 - more here
$('#exampleModal').modal();
<!-- Initialize Bootstrap 4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- MODAL -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Hello world
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Try this. It's works for me well.
function clicked(item) {
alert($(item).attr("id"));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button onclick="clicked(this);" id="modalME">Click me</button>
<!-- Modal -->
<div class="modal" id="modalME" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Modal in CSS</h2>
× <!--CHANGED TO "#close"-->
</div>
<div class="modal-body">
<p>One modal example here.</p>
</div>
<div class="modal-footer">
Nice! <!--CHANGED TO "#close"-->
</div>
</div>
</div>
</div>
<!-- /Modal -->
Related
So I wanted to create this concept of a simple game where imgs are loaded onto a screen and alert pop ups for each one,sort of like find an object game. I have that part done but I wanted to create an instance of a conditional statement that checks to see if the image was clicked.
When all elements have been clicked I was going to incorporate a pop up stating that the user has clicked everything on the page?Help please!
<!-- 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>
Something like this should get you started:
//$('body').css('background','blue');
var arrBoxes = [];
var ttl = $('.mybox').length;
$('.mybox').click(function(){
var bx = this.id;
if (arrBoxes.indexOf(bx) >= 0){
alert('already clicked');
}else{
arrBoxes.push(bx);
}
if (arrBoxes.length == ttl) alert('all done');
});
.mybox{float:left;width:150px;height:150px;margin:10px;}
.modal-body{overflow:auto;} /* Fixes float:left */
#b1{background:palegreen;}
#b2{background:wheat;}
#b3{background:pink;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- 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 id="b1" class="mybox">Box One</div>
<div id="b2" class="mybox">Box Two</div>
<div id="b3" class="mybox">Box Three</div>
</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>
You can use any of these three sample layouts. They are listed in order of popularity, with most popular at top. However, they all work just fine:
<!DOCTYPE html>
<html lang="en">
<head>
<meta tags go here>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/mycode.js"></script>
</head>
<body>
<!-- HTML CODE IN HERE -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta tags go here>
<style>
/* Style code in here */
</style>
<script type="text/javascript" src="https://CDN/jquery.js"></script>
<script>
$(document).ready(function(){
/* jQuery code in here */
}); //END document.ready
</script>
</head>
<body>
<!-- HTML CODE IN HERE -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta tags go here>
</head>
<body>
<!-- HTML CODE IN HERE -->
<style>
/* Style code in here */
</style>
<script type="text/javascript" src="https://CDN/jquery.js"></script>
<script>
$(document).ready(function(){
/* jQuery code in here */
}); //END document.ready
</script>
</body>
</html>
If you use the first method, then you would also create these external files:
public_html/css/common.css
public_html/js/jquery.min.js <--- downloaded from jQuery web site
public_html/js/myscripts.js
For the CSS document, you just take the code from between the <style></style> tags and save it into that external file.
For the jQuery document, you just take the code from between the <script></script> tags and save it into that external file.
Above, note that public_html is whatever your webroot is. If you purchase online shared hosting from GoDaddy or HostGator etc., it will usually be public_html. If you install XAMPP locally, it will be htdocs. If WAMP or MAMP, it will be www.
I tried today with modal windows on Bootstrap, but I have a problem. Modal won't show. I did exactly as shown in getbootstrap.com/javascript/#modals but still it isn't working. Does anybody know the problem? Here's my code.
<html>
<head>
<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
</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>
</body>
</html>
Ok so all you needed to do is add jquery to your javascript libraries as you can see below is working code just copy and paste the whole thing. In the head of your document there is a script tag with a link to bootstraps js file and above it is a link to jquerys js file. Bootstrap runs off of jquery so it will not work without it. With bootstrap you always need to load jquerys js file before bootstraps js file
<html>
<head>
<!-- Bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Custom script as written on bootstrap page -->
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
</script>
</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>
</body>
</html>
I think, you have two problems :
First one, as #Cory said, I think you ' ld be placed your custom javascript in the bottom of your page
Second one, you didn't include jquery (and don't forget to insert it before the bootstrap one)
I did a fiddle here and I add your <input id="myInput" /> into your modal and it seems to work pretty well : https://jsfiddle.net/9hxo6x88/
Hope it's help
I am creating a pop up div (modal) which will appear on screen by default. However I succeed to open it on button click but I want it open by default whenever I run the HTML page.
Here is my code.
<!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="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>
</head>
<body>
<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="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>
Where I am showing the modal using a button.In that I am using data-target property to invoke the modal. So how to do it without any click event?
Add class in to html code , such that
<div class="modal fade show d-block" id="newModal" role="dialog">
or you can call the following function when the page loads
$('#newModal').modal('show');
Use .modal('show') to show the model manually
$(document).ready(function() {
$('#myModal').modal('show');
});
<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>
<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="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>
Sorry I've not enough reputation to add a comment.
according to bootstrap modal component documentation, there's no need to pass any parameter to .modal() method.
$(document).ready(function() {
$("#myModal").modal();
});
Add class in to <div class="modal fade" id="myModal" role="dialog">, such that
<div class="modal fade in" id="myModal" role="dialog">
or you can call the following function when the page loads
$('#myModal').modal('show');
open modal at document.ready()
for eg.
$(document).ready(function (){
//open modal here
$('#myModal').show();
});
got a problem.
I am trying to trigger bootstrap modal via jquery and it doesnt work.
I tried every way:
way no1:
$(document).ready(function(){
$('#btn').click(function(){
$('#server_msg_modal').modal('show');
});
});
way no2:
$(document).ready(function(){
$('#btn').click(function(){
$('#server_msg_modal').modal('show');
});
});
way no3:
$('#server_msg_modal').modal({
show: 'true'
});
nothing is working...
please help me.
Your jQuery function to add the click handler to the button, and to open the modal window should both work. See the example below. I can only suggest you to take a look at for example Chrome's DevTools to see if you have any JavaScript errors in its console.
$(document).ready(function(){
$('#btn').click(function(){
$('#server_msg_modal').modal('show');
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="btn btn-danger" href="#server_msg_modal" data-toggle="modal">using data attribute</div>
<div class="btn btn-danger" id="btn">using jQuery click handler</div>
<div class="modal fade" id="server_msg_modal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal body</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I'm looking to use the twitter bootstrap modal functionality. As such I have copy pasted out of the docs and include all the files. But every time I click my button nothing appears and I'm not sure why:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/jquery-1.10.2.js"></script>
<script type="js/bootstrap.js"></script>
</head>
<body style="background:#bf9d93;">
<!-- 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>
</div>
</div>
</body>
</html>
Now according to the docs, under the usage section I am allowed to simply use the code above and invoke the modal via the data attributes. As such this is my first time using the element so I'm sure its a silly thing I've over looked but I cant see what it is...
Check line 8 of your code. You have:
<script type="js/bootstrap.js"></script>
Instead of:
<script src="js/bootstrap.js"></script>
Without correctly loading the bootstrap.js file it won't work.
On click event call:
$('#myModal).modal({ show: true });