Avatar billede ole_hj Juniormester
06. april 2017 - 17:33 Der er 1 kommentar og
1 løsning

Boostrap modal vindue php, html og javascript

Hej eksperter,

Jeg har lidt problemer med at få et modal vindue til at virke, er der nogen som kan hjælpe? Jeg vil gerne have, at der kommer et lille vindue op, når det er gået godt. Min kode er:

html koden er:
<html>
<body>
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
   
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
     
    </div>
  </div>
</body>

</html>

php og javascript er:

if($result){
        echo "<script type=\"text/javascript\">
    $(function(){
        //instantiate your content as modal
        $('#myModal').modal({
            //modal options here, like keyboard: false for e.g.
        });

        //show the modal when dom is ready
        $('#myModal').modal('show');
    });
</script>";
                }

Tak på forhånd
Avatar billede olsensweb.dk Ekspert
06. april 2017 - 19:36 #1
får du includeret jquery.js ?? (ikke vist)
får du includeret bootstrap.js ?? (ikke vist)


en hurtig test med dette includeret. (virker)

prøv at ændre $result fra false til true;

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>demo</title>
        <!-- http://getbootstrap.com/getting-started/ -->
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <style type="text/css">
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <?php

       
        // $result = true; // test
        $result = false; // test
       
        if ($result) {
            echo "<script type=\"text/javascript\">
            $(function(){
                //instantiate your content as modal
                $('#myModal').modal({
                    //modal options here, like keyboard: false for e.g.
                });

                //show the modal when dom is ready
                $('#myModal').modal('show');
            });
            </script>";
        }
        ?>
    </head>
    <body>
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">
                        <p>Some text in the modal.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
Avatar billede ole_hj Juniormester
06. april 2017 - 20:02 #2
Tak for hjælpen :)
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