87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<title>Bootstrap</title>
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7cAx3NSH4dPM3Sx2oQeud7Zr-KaGXmLk"></script>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
|
|
|
|
|
|
<style>
|
|
.bcontent {
|
|
margin-top: 10px;
|
|
}
|
|
/*#maps { height:350px;width:425px; display:none; }*/
|
|
#maps { height:350px;width:498px; }
|
|
|
|
</style>
|
|
<script>
|
|
$(function() {
|
|
|
|
// create a center
|
|
var c = new google.maps.LatLng(-33.8790, 151.2064);
|
|
|
|
//create map options object
|
|
var mapOptions = {
|
|
zoom: 14,
|
|
center: c,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
};
|
|
|
|
var map = new google.maps.Map(document.getElementById('maps'), mapOptions);
|
|
|
|
|
|
|
|
|
|
|
|
$("#btnShow").click(function() {
|
|
$("#sampleModal").modal("show", function(){
|
|
google.maps.event.trigger(map, "resize"); // resize map
|
|
map.setCenter(c); // set the center
|
|
}); // slide it down
|
|
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container bcontent">
|
|
<h2>Bootstrap Show Modal via JavaScript</h2>
|
|
<hr />
|
|
<!--button type="button" id="btnShow" class="btn btn-primary">
|
|
Launch modal
|
|
</button-->
|
|
<a href="#" id="btnShow">⚓</a>
|
|
<div class="modal" id="sampleModal">
|
|
<div class="modal-dialog modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Tutlane Note</h5>
|
|
<button type="button" class="close" data-dismiss="modal">
|
|
<span>×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body" id="maps">
|
|
<p>Tutlane.com is an eLearning organization providing quality online tutorials, articles, and information related to the latest programming technologies.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--div id="maps"></div-->
|
|
|
|
</body>
|
|
</html>
|
|
|