Bootstrap 4 - Modal
Jeg skal gerne have Bootstrap 4 Modal til at fungere ved hjælp af koden i http://jsfiddle.net/c4j5pzua/.Jeg har lagt koden ind i et testprogram. (Se nedenfor)
Når jeg trykker på knapperne sker der ikke noget.
Hvad har jeg gjort galt / undladt / …. ?
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"> </script>
<!-- Script til Modal -->
<script>
$('a[data-modal]').on('click',function(){
var $page = $(this).data('page');
var $image = $(this).data('image');
var $video = $(this).data('video');
var $title = $(this).data('title');
var $size = $(this).data('size');
$('#quickview .modal-title').text($title);
if ($size) { $('#quickview .modal-dialog').addClass('modal-'+$size); }
if ($image) {
$('#quickview .modal-body').html('<div class="text-center"><img class="img-fluid" src="'+$image+'"></div>');
} else if ($video) {
$('#quickview .modal-body').html('<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/'+$video+'?autoplay=1" allowfullscreen></iframe></div>');
}
if ($page) {
$('#quickview .modal-body').load($page,function(){
$('#quickview').modal({show:true});
});
} else {
$('#quickview').modal({show:true});
}
$('#quickview').on('hidden.bs.modal', function(){
$('#quickview .modal-title').text('');
$('#quickview .modal-body').html('');
if ($size) { $('#quickview .modal-dialog').removeClass('modal-'+$size); }
});
});
</script>
</head>
<body>
<div class="container my-4">
<h3 class="mb-4">Bootstrap 4 Modal YouTube Videos, Images & Pages</h3>
<a href="java script:;" class="btn btn-primary" data-modal data-video="zpOULjyy-n8" data-title="Video Title" data-size="xl">Video</a>
<a href="java script:;" class="btn btn-primary" data-modal data-image="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social-logo.png" data-title="Image Title" data-size="">Image</a>
<a href="java script:;" class="btn btn-primary" data-modal data-page="https://getbootstrap.com" data-title="Page Title" data-size="lg">Page</a>
<p class="mt-4">Trust me, it works!</p>
</div>
<div class="modal fade" id="quickview" tabindex="-1" role="dialog" aria-labelledby="quickview" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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>
</div>
</div>
</body>
</html>
