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>
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.
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???
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?
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/
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.
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????
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

Opret Preview

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





Premium
Test: Huaweis Matebook X er særlig laptop med en svaghed, som du skal være opmærksom på
Huawei beviser endnu en gang, at de sagtens kan mingle sig med de bedste pc-producenter. Men alligevel skyder selskabet lidt ved siden af, med sin nyeste maskine.
Computerworld
Bitcoinen nåede lige at kulminere igen – men så kom krakket
Der blev sat en ny rekord for bitcoinens værdi i år – men godt 24 timer efter blev der høvlet næsten 20.000 kroner af den.
CIO
Podcast: Her er seks gode råd om ledelse og digitalisering fra danske top-CIO'er
The Digital Edge: Vi har talt med 17 af Danmarks dygtigste digitale ledere - og samlet deres seks bedste råd om digitalisering og ledelse. Få alle rådene på 26 minutter i denne episode af podcasten The Digital Edge.
Job & Karriere
Se Waoos forklaring: Derfor har selskabet fyret topchef Jørgen Stensgaard med omgående virkning
Waaos bestyrelse opsiger fiberselskabets topchef, Jørgen Stensgaard, der fratræder med omgående virkning. Se hele forklaringen fra Waao her.
White paper
Kunsten at navigere i en tilpasningsøkonomi
Evnen til at tilpasse sig en verden i konstant forandring bliver afgørende for virksomhedens mulighed for at vækste i fremtiden. Ét af de finansielle håndtag du kan skrue på, er en hel eller delvis outsourcing af it-driften. I e-bogen ”Kunsten at navigere i en tilpasningsøkonomi” får du viden om, hvordan din virksomhed kan bruge tilpasningsøkonomi til at håndtere fremtidens krav til it. Vi spørger blandt andet: - Kan din virksomhed skalere og tilpasse sin digitale kapacitet og økonomi? - Har dine kunder tillid til, at du har de skarpeste it-løsninger? - Ville I kunne styrke forretningen ved at give jeres it mere fokus? - Kan I få øget funktionalitet til samme pris? Vi fokuserer på risiko, økonomi, fokus og valg af it-partner, som er fire opmærksomhedspunkter du skal have styr på for at lykkes med at tilpasse virksomheden til at modstå forandringerne i verden.