enter image description here
Hey,
I am opening a modal on click the input field and i want the date-picker as an already open Calendar with an hidden input field. I have already tried autofocus on hidden input and trigger click event on input field but it is not going as per my expectations.
Please help me and give my some suggestions to resolve it.
Thanks in advance.
after the modal opens call its event. inside that event call picker.open().
run the snippet below for an example
var $input = $('.datepicker').pickadate();
var picker = $input.pickadate('picker');
$(window).on('shown.bs.modal', function() {
picker.open();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.date.js"></script>
<script src="https://amsul.ca/pickadate.js/vendor/pickadate/lib/picker.time.js"></script>
<link rel="stylesheet" href="https://amsul.ca/pickadate.js/vendor/pickadate/lib/themes/default.css">
<button type="button" id="buttonmodal" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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" id="modal-body">
<input type="text" class="datepicker" />
</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>
Modal is working in Firefox but not in Chrome, I added the code below.
The following is my app.js :
$('.test').on('click', function (event) {
event.preventDefault();
$('#join-req').modal();
});
HTML :
Join to my Group
The modal :
<div class="modal fade" tabindex="-1" role="dialog" id="join-req">
<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">Join Request</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="post-body">Join request to expert</label>
<textarea class="form-control" name="join-body" id="join-body" rows="5"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="modal-save">Submit request</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The following are the Bootstrap and jquery links :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<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="{{ URL::to('src/css/main.css') }}">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="{{ URL::to('src/js/app.js') }}"></script>
Thanks in advance
I can think of 3 possible causes of your problems, given that no errors are shown in your console.
JQuery could have been loaded twice.
check for inclusions of files which may already have been included in the others.
The .js files which you are referencing might not be in the right order,
make sure JQuery is loaded and only then Bootstrap .
Your JQuery doesn't work well with your current Bootstrap version. Try upgrading either of the 2 or both.
I wonder why my Bootstrap 4 modal is not working. Any clue? I literally copy and paste from the Bootstrap 4 website (http://v4-alpha.getbootstrap.com/components/modal/#live-demo) Also, I have added js that they say.
Please find below the code.
Thanks
I have checked other posts and I didn't have luck
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap CSS JS-->
<!--fonts-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 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>
</body>
<!-- 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>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#MyModal").modal();
});
})
</script>
</html>
There are typo in your snippet (unused }); at the end), but most importantly your toggle button is targeting the wrong modal id. Make sure data-target is the id of the modal you're targeting:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
Demo:
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').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>
<!-- 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>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#myModal").modal();
});
</script>
</html>
Edit: Updated Bootstrap 4-beta as per #OlavT request:
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<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>
<!-- 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#myModal").modal();
});
</script>
</html>
You have some script error and your data-target="#exampleModal" does not match with the model's ID
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap CSS JS-->
<!--fonts-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!--CB-modal -->
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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>
</body>
<!-- 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>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#MyModal").modal();
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
});
</script>
</html>
I landed here because I was having the same error. After going back and reading a bit. I ran into the following:
If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.
Because I downloaded bootstrap 4 and copied the folders as I used to with bootstrap v3, I assumed it was all going to work.
Download section has the CDN for popper and jQuery
https://getbootstrap.com/docs/4.0/getting-started/download/
hope this helps... Nessio
<script>
$(document).ready(function() {
$("#MyModal").modal();
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus();
});
});
</script>
Looks like the data-target name you entered in not correct.
Here is the correct code of your button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
your data target is wrong: #exampleModal, should be #myModal.
also, you have incorrect syntax in your js code
$(document).ready(function() {
$("#MyModal").modal();
});
})//remove this
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').focus()
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta content="Description" name="description">
<meta content="index,follow" name="robots">
<link href="/images/myicon.png" rel="icon" type="image/png">
<title>TITLE HERE</title>
<!--CSS-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<!--Bootstrap CSS JS-->
<!--fonts-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
<body>
<!--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>
<!-- 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>
</body>
<!-- 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>
<!--JS below-->
<!--modal-->
<script>
$(document).ready(function() {
$("#MyModal").modal();
});
</script>
</html>
I faced the same error but for a different reason(...rather silly). I was using thymeleaf layout and accidentally put the modal div outside the content fragment.
<div layout:fragment="content">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#someId">Open</button>
...
</div>
<div class="modal" id="someId">
</div>
So, although the modal div was present in the code, it was not rendered on the DOM(checked with View Page Source). It fails silently without any errors/warnings. Please ensure that the modal div is rendered on the DOM.
My issue was exactly explained here. https://stackoverflow.com/a/49039205/9855327
In my case, it is not related with wrong references id, it was because I created a modal inside a table in a loop in C# / Aspnet MVC. Se I created a modal for each table row.
I just inserted the code below at the end body tag:
<script>
jQuery(document).ready(function () {
jQuery("body").children().first().before($(".modal"));
});
</script>
It will move all modals HTML elements to the beginning of the body and for me was enough.
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'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 });