Avatar billede hanibald Mester
11. september 2019 - 22:32 Der er 6 kommentarer

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">&times;</span></button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
</body>
</html>
Avatar billede Slater Ekspert
12. september 2019 - 08:15 #1
Virker fint når jeg prøver.

Det eneste der ikke virker er knappen "Page", og det er fordi du forsøger at loade getbootstrap.com ind på siden, som allerede har jQuery inkluderet, og du derfor får den loadet dobbelt, hvilket giver scriptfejl. Når du først har klikket på "Page", er der derfor intet andet der virker. Men at klikke på de andre først virker fint, og den fejl er hurtigt fikset ved bare at skifte den URL til noget der kan loades.
Avatar billede hanibald Mester
12. september 2019 - 15:48 #2
Har slettet "page". Skal alligevel ikke bruge den.
Har genstartet både server (Windows10 / Apache (Wamp)) og klient for at have rene maskiner.
Virker stadig ikke udover at knapperne som også tidligere skifter til aktiveret" status.
Har skiftet til visning af billede fra egen server. Ingen ændring.
Har testet med 5 browsere.
Apache accessloggen vise ingen access, men det skal den måske heller ikke fra Ajax.
Hvad gør jeg for at komme videre???
Avatar billede Slater Ekspert
12. september 2019 - 16:16 #3
Din access log skal vise noget for AJAX, men du har ikke noget AJAX der. Det er bare Javascript der viser noget indhold på klik, ikke AJAX. Så nej, det skal ikke vises i server-loggen.

Men når du åbner den jsfiddle du selv har lavet øverst i dit spørgsmål og klikker på en af de to knapper der ikke er "page", så sker der ingenting? Det skal det sgu, for det virker som sagt helt fint her i både Firefox og Chrome.
Ser du noget i konsollen i browseren når du gør det?
Avatar billede olsensweb.dk Ekspert
12. september 2019 - 19:03 #4
prøv at pakke din js code ind i en $( document ).ready(function() {

$( document ).ready(function() {
    // her skal din js code ligge
});


https://learn.jquery.com/using-jquery-core/document-ready/
Avatar billede Slater Ekspert
12. september 2019 - 22:13 #5
#4: God pointe hvis han bruger koden som skrevet her, da scriptet refererer elementet før det defineres - men det har ingen indflydelse i den jsfiddle, da scriptet der udføres til sidst. Så stadig meget underligt hvis hanibald ikke kan få den til at virke.
Avatar billede hanibald Mester
17. september 2019 - 16:35 #6
Jeg har ikke selv lavet den jsfiddle. Den er fundet nederst her: https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal
via Modal-dokumentation i Bootstrap 4.

JUBIII. Efter at have sat "håndtag" på scriptet kunne jeg i testprogrammet vise både billede og video.

Det medførte en del prøvelser at få billede og video vist i driftsprogrammet. Som mit absolut sidste skud i bøssen flyttede jeg CDN-linkene fra nederst i Body ind i Head og
BINGO
Nu kunne jeg vise billeder (endda fra min php whileløkke) og hardkodede videoer (har endnu ingen video-identer i DB).

Har (alligevel) forsøgt med "page":
Det går fint med at vise defaulten: getbootstrap.com både i test og i drift. Ved alle andre forsøgte sites vises overlayskærmen, men feltet til site-data forbliver blankt.

Et gæt på hvorfor????
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester