I am using bootstrap in my spring boot web application Used may features of bootstrap like SB admin, data-table etc all off them working fine for me Now I am trying to use bootstrap model popup and its not working for me here is my jsp code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html lang="pt-BR" id="ng-app" ng-app="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- CSS import -->
<link rel='stylesheet' href='<c:url value="/resources/css/signin.css" />' type='text/css' media='all' />
<link rel='stylesheet' href='<c:url value="/resources/css/style.css" />' type='text/css' media='all' />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/css/sb-admin-2.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css" />
<link rel='stylesheet' href='<c:url value="/resources/css/logoutPanel.css" />' type='text/css' media='all' />
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.7.0/metisMenu.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/startbootstrap-sb-admin-2/3.3.7+1/js/sb-admin-2.min.js"></script>
<script src='<c:url value="/resources/js/web3.min.js" />'></script>
<script src='<c:url value="/resources/js/solidity.js" />'></script>
</head>
<body>
<div class="header">
<div class="logoDiv"><img src='<c:url value="/resources/images/logoWhite.png" />' class="logo top-margin-small"></div>
<div class="titleDiv"><h1 class="top-margin-small"> Asset management</h1></div>
</div>
<div class="container">
<input type="hidden" id="userId" value="${userId}">
<button type="button" class="btn btn-info btn-sm" id="back_to_dashboard" aria-label="back to Dashboard" style="border: 0px;margin-top:10px;">
<a href="/admin/home"><span class="glyphicon glyphicon-chevron-left" style="color: #a6dfe7; font-size: 20px; vertical-align: middle;"
aria-hidden="true"></span> Dashboard</a>
</button>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<form:form action="/save/asset" method="POST" modelAttribute="asset" class="form-user-registration">
<h2 class="form-user-registration-heading">New Asset</h2>
<div>
<label for="assetCode" class="sr-only">Code </label>
<form:input path="assetCode" id="assetCode" class="form-control" placeholder="Asset Code"/>
<span class="error"><p id="asset_code_error"></p></span>
<form:errors path="assetCode" cssClass="error" />
</div>
<div>
<label for="assetName" class="sr-only">Asset Name </label>
<form:input path="assetName" id="assetName" class="form-control" placeholder="Asset Name"/>
<span class="error"><p id="asset_name_error"></p></span>
<form:errors path="assetName" cssClass="error" />
</div>
<div>
<label for="assetType" class="sr-only">Asset Type</label>
<form:input path="assetType" id="assetType" class="form-control" placeholder="Asset Type"/>
<span class="error"><p id="asset_type_error"></p></span>
<form:errors path="assetType" cssClass="error"/>
</div>
<div>
<label for="assetDescription" class="sr-only">Asset Description</label>
<form:textarea path="assetDescription" id="assetDescription" class="form-control" placeholder="Asset Description"/>
<span class="error"><p id="asset_description_error"></p></span>
<form:errors path="assetDescription" cssClass="error"/>
</div>
<div>
<label for="assetStatusId" class="sr-only">Asset Status</label>
<form:select path="assetStatusId" id="assetStatusId" class="form-control" name="assetStatusId">
<form:option value="1">Available</form:option>
<form:option value="2">Allocated</form:option>
<form:option value="3">Damaged</form:option>
</form:select>
<form:errors path="assetStatusId" cssClass="error"/>
</div>
<div>
<c:choose>
<c:when test="${edit}">
<input type="button" id="update" value="Update" class="form-user-registration-button btn btn-success" />
</c:when>
<c:otherwise>
<input type="button" id="register" value="Register" class="form-user-registration-button btn btn-success"/>
</c:otherwise>
</c:choose>
<input type="button" class="form-user-registration-button btn btn-primary" value="Reset" id="resetAssetsDetails">
</div>
<div id="result" class="result-div"></div>
</form:form>
<!-- blockchain progress popup -->
<div class="modal fade" id="myModal" role="dialog" data-keyboard="true" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Blockchain progress</h4>
</div>
<div id="progressDiv">
<div id="progress">
<div id="bar"></div>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-8 padd10">
<label>1. Transaction Sent<img src='<c:url value="/resources/images/tick.png" />' width="20px"/></label>
<br>
<label id="step2" hidden>2. Transaction Id received<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
<br>
<label id="step3" hidden>3. Mining in progress<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
<br>
<label id="step4" hidden>4. Mining completed<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
<br>
<label id="step5" hidden>5. Transaction completed<img src='<c:url value="/resources/images/tick.png" />' height="20px" width="20px"/></label>
</div>
<br>
<br>
</div>
<div class="modal-footer noborder">
<button type="button" class="btn btn-default" id="closeButton" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end blockchain progress popup -->
</div>
<script src='<c:url value="/resources/js/newAsset.js" />'></script>
<div class="footer">
<img src='<c:url value="/resources/images/poweredBy.png"/>' class="powered-by-logo"/>
</div>
</body><!-- body close here -->
</html><!-- /html -->
I have tried opening the the popup by using toggle button as well as using Jquery for toggle button I have used
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
And for jquery I have used
$("#myModal").modal("show");
And
$("#myModal").modal("toggle");
I have read some posts regarding same issue and tried to resolve this but still the result was same.
Thanks in advance.
The problem is in your bootstrap version try to replace your actual version with this one :
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>