I am trying to get this to work. I think I have a problem with my linking to the libraries.
You can find a Fiddle Example here: http://jsfiddle.net/pL2w37qb/
I want to take that from fiddle and make it real. Here is my code in again I think I am just link incorrectly to the bootstrap lib and might also have an issue with my jquery arrangement. I am very new to this!
<title>Test</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.csshttp://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$('.prev').click(function () {
$(this).closest('.modal').modal('hide').prev('.modal').modal('show');
});
$('.next').click(function () {
$(this).closest('.modal').modal('hide').next('.modal').modal('show');
});
</script>
</head>
<body>
<a href="#modal1" data-toggle="modal">Open modal</a>
<div id="modal1" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header"> <a href="#" class="prev">prev</a>
<button type="button" data-dismiss="modal" aria-hidden="true">×</button> <a href="#" class="next">next</a>
</div>
<div class="modal-body">Modal 1</div>
</div>
<div id="modal2" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header"> <a href="#" class="prev">prev</a>
<button type="button" data-dismiss="modal" aria-hidden="true">×</button> <a href="#" class="next">next</a>
</div>
<div class="modal-body">Modal 2</div>
</div>
<div id="modal3" class="modal hide fade container" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-header"> <a href="#" class="prev">prev</a>
<button type="button" data-dismiss="modal" aria-hidden="true">×</button> <a href="#" class="next">next</a>
</div>
<div class="modal-body">Modal 3</div>
</div>
</body>
</html>
Senjuti Mahapatra :
First of all include your jquery.min.js before bootstrap.js as bootstrap uses features from jquery. Secondly the CSS link you provided is wrong. It should be :\n<link rel=\"stylesheet\" href=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css\">\n\nSee the below snippet:\n\n\r\n\r\n $('.prev').click(function () {\r\n $(this).closest('.modal').modal('hide').prev('.modal').modal('show');\r\n });\r\n $('.next').click(function () {\r\n $(this).closest('.modal').modal('hide').next('.modal').modal('show');\r\n });\r\n<title>Test</title>\r\n <link rel=\"stylesheet\" href=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css\">\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js\"></script>\r\n <script src=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js\"></script>\r\n\r\n\r\n <body>\r\n\r\n <a href=\"#modal1\" data-toggle=\"modal\">Open modal</a>\r\n\r\n <div id=\"modal1\" class=\"modal hide fade container\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n <div class=\"modal-header\"> <a href=\"#\" class=\"prev\">prev</a>\r\n\r\n <button type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button> <a href=\"#\" class=\"next\">next</a>\r\n\r\n </div>\r\n <div class=\"modal-body\">Modal 1</div>\r\n </div>\r\n\r\n <div id=\"modal2\" class=\"modal hide fade container\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n <div class=\"modal-header\"> <a href=\"#\" class=\"prev\">prev</a>\r\n\r\n <button type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button> <a href=\"#\" class=\"next\">next</a>\r\n\r\n </div>\r\n <div class=\"modal-body\">Modal 2</div>\r\n </div>\r\n\r\n <div id=\"modal3\" class=\"modal hide fade container\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\r\n <div class=\"modal-header\"> <a href=\"#\" class=\"prev\">prev</a>\r\n\r\n <button type=\"button\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button> <a href=\"#\" class=\"next\">next</a>\r\n\r\n </div>\r\n <div class=\"modal-body\">Modal 3</div>\r\n </div> \r\n\r\n </body>",
2016-05-12T03:46:16