I tried everything and checked it over and over again. But i still can't find what's wrong with my code.
I think the id of the img and the modal is right. And there is also nothing wrong with the head part....
Could you take a look of my code? I'd really appreciate that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Just a Portfolio</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/1.png" alt="heiheihei">
</div>
<div class="col-md-6 text-right">
<h1 class="text-uppercase text-thin title-super">Weikang Zhang</h1>
<h3>It's Now or Never.</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img class="title-logo img-responsive" src="img/2.jpg" alt="stussy guy">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-muted">Hello</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="img/a.jpg" data-toggle="modal" data-target="#p1">
</div>
<div class="col-md-4">
<img class="img-responsive" src="img/b.jpg">
</div>
<div class="col-md-4">
<img class="img-responsive" src="img/c.jpg">
</div>
</div>
<div class="row">
<div class="col-md-4">
<h3 class="text-center">Man</h3>
</div>
<div class="col-md-4">
<h3 class="text-center">Book</h3>
</div>
<div class="col-md-4">
<h3 class="text-center">Woman</h3>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="p1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Favorite App Page</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="images/a.jpeg">
This was my first project in this class. I learned a lot about HTML and CSS.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
problem is here;
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
bootstrap is depended on jquery so load jquery before bootstrap.js
it should be
<script type="text/javascript" src="js/jquery-2.1.4.min.js">
<script type="text/javascript" src="js/bootstrap.js">
Include the jquery js before bootstrap js. Then try.
Apart from placing the source to jquery before bootstrap.js, you need to show the modal. This can be done by $('#modalId').modal('show') Just put this in your JS:
$(document).ready(function(){
$('#p1').modal('show');
});
Here is a Working Demo
Related
The problem is on clicking the item in the popup modal, the data-value is reflecting all the input fields
I have tried this code and it works with that but it is also changing others. The data value should reflect on the particular input field only. currently it is changing all the previous and next input fields
function openmodal(e) {
//prevent(default);
//document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
$('#myModal').modal('show');
$(document).on("click", ".hello", function(event){
event.preventDefault();
e.value=$(this).attr("data-id");
alert(e.value);
$('#myModal').modal('hide');
});
}
<!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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2">2</p>
<a class="hello" data-id="3">3</p>
<a class="hello" data-id="4">4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
function openmodal(input) {
$('#myModal').modal('show');
$(".hello").unbind().click(function(event){
$(input).val($(this).attr("data-id"));
$('#myModal').modal('hide');
});
}
<!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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<input id="image1" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<input id="image2" onclick="return openmodal(this);"/>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<input id="image3" onclick="return openmodal(this);"/>
</div>
</div>
</div>
<!-- Modal -->
<div id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<a class="hello" data-id="2" >2</p>
<a class="hello" data-id="3" >3</p>
<a class="hello" data-id="4" >4</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
** I am new to javascript and willing to learn it on my own interest . I am unable to execute a bootstrap modal after 5 seconds to pop up on the page using setTimeout in javascript. I dont need it in Jquery. Please someone assist me on this **
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<title>Task_1</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 main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="images/alert.png">
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
setTimeout(function() {
$('#overlay').modal('show');
}, 12000);
</script>
</body>
</html>
Wrap around the $(function () {}) and change 12000 to 5000.
$(function() {
setTimeout(function() {
$('#overlay').modal('show');
}, 5000);
});
<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>
<div class="container main_div">
<div class="modal fade" id="overlay">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Please click to watch the video again..</p>
<div class="popup_img">
<img src="//placehold.it/200x75?text=alert" />
</div>
</div>
</div>
</div>
</div>
</div>
I've recently been having a problem with modals in Bootsrap 3.
I'm working on a test website (not anything I would actually put on the web) and have 3 pictures (each in a col-md-4) next to each other, and I am planning on having one button centered under each picture which can be clicked for a modal to show up with more info.
I set up the first modal, which worked perfectly.
However, when I added the second one, I found that when you click either button, both modals show up on top of each other, (the second one first) and when you press "Back to home", it goes to the other modal.
You can only go back to home by pressing the "X" one or two times.
I am almost certain that this is due to my JavaScript in <head> being very incorrect, but I am not very good at JS and have no idea what I did wrong...
Here is the html so you can inspect my handiwork:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#chimechoModal").modal('show');
});
});
</script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
1) Even though you are using inline javascript, there is no need to define the <script> tag twice
2) This line in your code says that whenever an element in your DOM with the class 'btn' is clicked it will perform a function (open a modal in your case). You are listening to both the 'btn' elements' click events.
$(".btn").click(function(){
You can assign a different class to each button for each modal type. For example,
<script type="text/javascript">
<button type="button" class="btn btn-primary btn-chimecho" data-toggle="modal" data-target="#chimecho">
<button type="button" class="btn btn-primary btn-eevee" data-toggle="modal" data-target="#eevee">
$(function(){
$(".btn-chimecho").click(function(){
$("#chimechoModal").modal('show');
});
$(".btn-eevee").click(function(){
$("#eeveeModal").modal('show');
});
});
</script>
It's because you're using .btn (a common class shared on both buttons) to trigger the modal. So when you click on any .btn, it fires both modals.
Either add a class/id or use the data-target attribute on your click handler to fire the appropriate modal, or since your button is right before the modal element in your html, you can just use a single click handler with $('.btn') and fire the modal via $(this).next().modal().
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>space</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<script type="text/javascript">
$(function() {
$(".btn").on('click',function() {
$(this).next().modal("show");
});
});
</script>
</head>
<body>
<div class="container custom-container">
<div class="row">
<div class="col-xs-12" style="height:15px;"></div>
</div>
<div class="row">
<div class="col-md-6">
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1>Mini Pokedex</h1>
<h4>Created by spaceman1980</h4>
</div>
</div>
<div class="row">
<hr>
</div>
<div class="row">
<div class="col-md-4">
<img class="img-responsive center-block" src="images/chimecho.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/eevee.png" style="width: 100%; height: auto;">
</div>
<div class="col-md-4">
<img class="img-responsive center-block" src="images/james.jpg" style="width: 100%; height: auto;">
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#chimecho">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="chimechoModal" tabindex="-1" role="dialog" aria-labelledby="chimechoLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="chimechoLabel">The Wind Chime Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Chimecho makes its cries echo inside its hollow body. When this Pokémon becomes enraged, its cries result in ultrasonic waves that have the power to knock foes flying.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#eevee">
Pokedex Entry
</button>
<!-- Modal -->
<div class="modal fade" id="eeveeModal" tabindex="-1" role="dialog" aria-labelledby="eeveeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="modal-title" id="eeveeLabel">The Evolution Pokemon</h5>
</div>
<div class="col-md-6 text-right">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Eevee has an unstable genetic makeup that suddenly mutates due to the environment in which it lives. Radiation from various stones causes this Pokémon to evolve.
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Back to home</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/
This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<label for="column-type" class="control-label">Date</label>
<select class="form-control" id="date-format">
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Separator</label>
<select class="form-control" id="date-separator">
<option>/</option>
<option>-</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Example</label>
<input class="form-control" id="date-example" value="1-1-2017" />
</div>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
Use bootstrap table instead of cols check this fiddle
Prologue: I know this problem is old, but, in my case, is NOT due to loading twice Jquery
My html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
<title>Maiscai</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Maiscai v0.03</a>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="progress_bar_row">
<div clas="col-sm-12">
<div class="progress col">
<div class="progress-bar progress-bar-info"
role="progressbar"
style="width: 0%">
</div>
</div>
</div>
</div>
<div class="row" id="result_row">
<div class="col-sm-12" id="result_cell"></div>
</div>
<div class="row" id="log_row" style="border: 1px solid gray;">
<div class="col-sm-12">
<div id="log" style="overflow: auto;"></div>
</div>
</div>
</div>
<!-- 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">
... this is the 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 type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/cache.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
In the file js/index.js I've defined this
// Application bootstapper
initialize: function() {
document.addEventListener(
'deviceready',
app.onDeviceReady,
false
);
}
onDeviceReady: function() {
....
// Modal triggers
$(document).on('click','.list-group-item', function (){
$('#myModal').modal("show");
});
....
},
Note that actually I binded the event to document because .list-group-item elements are being created at runtime.
The problem is that: when I click on one of these items, I got this error
I/chromium( 6186): [INFO:CONSOLE(53)] "Uncaught TypeError: Object [object Object] has no
method 'modal'", source: file:///android_asset/www/js/index.js (53)
I've tried both via jQuery 1.11.3 and latest 2.x available, but same problem.
Bootstrap is at versione 3.3.6
Thanks to #adeneo comments, I found the problem: the bootstrap.min.js file was not included at all due to an error in the path.