tutorial popup pagina tonen

Door Michael Visser op 29-09-2017 17:58 gewijzigd op 30-09-2017 11:33

6.577 views

Hallo allemaal,

ik ben bezig met een tutorial popup systeempje alleen vroeg ik me af hoe ik nu precies een extern scriptje kan inladen


<?php
if ($conn->connect_error) {
		die("Connection failed: " . $conn->connect_error);
		}
		$sql="select Value from tabletest where uid='" . $uid. "' ";
		$result = $conn->query($sql);
		if ($result->num_rows > 0) {
			$result=$result->fetch_assoc()["Value"];
		}
		print($result);
		if($result==1)
		{
			echo "<script> loadModal()</script>";
		}
?>

Het gaat om het gedeelte echo "<script> loadModal()</script>"; , dit komt in mijn index als iemand inlogt komt er een popup maar het externe scriptje heet popup.php hoe krijg ik die in de echo hierboven ? alvast bedankt

Michael Visser

02-10-2017 19:00

TOP Frank Nietbelangrijk het werkt hij popt op Super man, bedankt

[size=xsmall]Toevoeging op 02/10/2017 19:23:52:[/size]

Zie je toevallig ook waar het mis gaat met buttons klikken ? hij klikt bijv niet op volgende pagina's 1 2 3 4 doen het ook niet staat er toevallig nog iets fout ?

Frank Nietbelangrijk

02-10-2017 21:09

Bij mij werken de buttons. Waarom die prev en next als je toch maar vijf buttons hebt?

Tevens hoef je niet voor iedere knop een eigen functie te schrijven. Maak 1 functie voor alle vijf...

Michael Visser

02-10-2017 22:00

Raar dit man , ik snap der even helemaal niets van , ik heb jou code gekopieerd en bij mij werken die buttons totaal niet << en >> niet maar 1 2 3 4 5 ook niet dat is toch niet te snappen bij jou werkt het wel bij mij niet

Ariën

02-10-2017 22:21

Misschien handig om te vertellen WAT er dan gebeurt?

Mike Visser

02-10-2017 22:50 gewijzigd op 02-10-2017 23:40

<?php $showmodal = true; ?>

<html>
    <head>
        <!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
     
<div class="modal fade" id="modalForm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Tutorials</h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                <div id="1" class="hideclass">Page1</div>
                <div id="2" class="hideclass">Page2</div>
                <div id="3" class="hideclass">Page3</div>
                <div id="4" class="hideclass">Page4</div>
                <div id="5" class="hideclass">Page5</div>
            </div>
            
            <!-- Modal Footer -->
            <div class="modal-footer">
            <button class="btn btn-default" id="btnPrevious"> << </button>   
            <button class="btn btn-default" id="btn1">1</button>   
            <button class="btn btn-default" id="btn2">2</button>   
            <button class="btn btn-default" id="btn3">3</button>   
            <button class="btn btn-default" id="btn4">4</button>   
            <button class="btn btn-default" id="btn5">5</button>   
            <button class="btn btn-default" id="btnNext"> >> </button>   
            </div>
        </div>
    </div>
</div> 
<script type="text/javascript">
 
function loadModal(){
    
    
        $('#modalForm').modal({backdrop: 'static', keyboard: false})
        $('#modalForm').modal('show'); 
}
    
$(document).ready(function(){
      <?php if($showmodal == true) echo "$('#modalForm').modal('show');"; ?>
    
    $("#2").css("display","none");
    $("#3").css("display","none");
    $("#4").css("display","none");
    $("#5").css("display","none");
    $(".close").css("display","none");
    
     $("#btn1").on("click",function(){
        $(".hideclass").css("display","none");
        $("#1").css("display","block");
    });
    $("#btn2").on("click",function(){
        $(".hideclass").css("display","none");
        $("#2").css("display","block");
    });
    $("#btn3").on("click",function(){
        $(".hideclass").css("display","none");
        $("#3").css("display","block");
        
    });
    $("#btn4").on("click",function(){
        $(".hideclass").css("display","none");
        $("#4").css("display","block");
        
    });
    $("#btn5").on("click",function(){
        $(".hideclass").css("display","none");
        $("#5").css("display","block");
        $(".close").css("display","block");
    });
     
     $("#btnPrevious").on("click", function(){
        var btn="";
        if($("#1").is(':visible'))
        {
            $(this).addClass('ui-state-focus');
            btn="#1";
        }
        else if($("#2").is(':visible'))
        {
            $(this).addClass('ui-state-focus');
            btn="#1";
        }
        else if($("#3").is(':visible'))
        {
            btn="#2";
        }
        else if($("#4").is(':visible'))
        {
            btn="#3";
        }
        else if($("#5").is(':visible'))
        {
            btn="#4";
        }
        $(".hideclass").css("display","none");
        $(btn).css("display","block");
    });
    
    $("#btnNext").on("click", function(){
        var btn="";
        if($("#1").is(':visible'))
        {
            btn="#2";
        }
        else if($("#2").is(':visible'))
        {
            btn="#3";
        }
        else if($("#3").is(':visible'))
        {
            btn="#4";
        }
        else if($("#4").is(':visible'))
        {
            btn="#5";
            $(".close").css("display","block");
        }
        else if($("#5").is(':visible'))
        {
            btn="#5";
            
        }
        $(".hideclass").css("display","none");
        $(btn).css("display","block");
    });
    
})

</script>
 </body>     
</html>

Ariën

02-10-2017 23:01

Kan je die onnodige cijfertjes even weghalen, en code-tags gebruiken?
Dat leest wat makkelijker.

Mike Visser

02-10-2017 23:23

De eerste pagina komt op , dan zie je onderin dat je naar de volgende pagina kan gaan maar is niet aan te klikken. Weet niet waar de fout zit hoor ....

Frank Nietbelangrijk

03-10-2017 14:03

Welke Browser? Welke versie? Komen er foutmeldingen in de console te staan? (Console vindt je meestal als je op de F12 toets drukt)

Mike Visser

03-10-2017 20:09

De pagina's zijn nu aan te klikken maar gooit mijn hele rechterkant van het spel weg . Het gebeurd ook met elke browser . Ik weet niet waar ik nu moet kijken/zoeken . Als ik op F12 druk krijg ik geen console .
Wat doe ik nu niet goed ???

Ray Mond

29-08-2019 11:29 gewijzigd op 29-08-2019 11:31

Een beetje een oud topic, ik weet het maar dit is wel toevallig wat ik zocht, enkel zou ik graag ditzelfde willen maar dan met accepteer en ga weg knop (misschien met scrollbar als dat mogelijk is voor info?) en op tijdstip per dag dat het getoond gaat worden, kan iemand hier mee helpen? Zou fantastisch zijn!

Reageren

Inloggen om te reageren