Προς το περιεχόμενο

Popup Alert - Bootstrap


Προτεινόμενες αναρτήσεις

Δημοσ.

Γειά στο φόρουμ.

 

Ας υποθέσουμε ότι έχουμε μια φόρμα σύνδεσης στον τομέα: www.mydomain.com

Έχοντας το bootstrap σαν βασικό μου framework θέλω όταν πατήσω λάθος στοιχεία

να περάσω ένα μήνυμα λάθους στην login.html μου.

 

 

Όπου $query_result το query που θέλω να εφαρμώσω. Όταν λοιπόν πάρω αρνητικό αποτέλεσμα θέλω να περάσω το μήνημα της $msg στην ίδια φόρμα ενεργοποιόντας με κάποιον τρόπο το popup

message. Εδώ κολλάω εγω δεν ξερω πως να ορίσω το trigger event.

 

To σκέφτομαι σωστά ?

<?php
$msg = "";
if($query_result < 0) {

$msg = "Wrong username or Password";

                       }
  else {

 echo "WELCOME ADMIN";
 header("location:  ../index.php?username=admin");
       }
?>
Δημοσ.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Κατάσταση</h4>
            </div>
            <div class="modal-body">
              <div class="alert alert-danger" role="alert"><i class="fa fa-times-circle"></i> <strong>
	<?php
	$msg = "";
	if($query_result < 0) {
	
	$msg = "Wrong username or Password";
	 echo($msg);
	}
	else {
	
	echo "WELCOME ADMIN";
	header("location: ../index.php?username=admin");
	}
	?>
</strong></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
  <script>
        $(document).ready(function () {
            $('#myModal').modal({
                show:false
            });
            $('#myModal').modal('show')
        });
    </script>

Για δες αυτό παίζει? .Φτιάχνει ένα modal dialog με bootstrap. Στο document.ready τον κάνει instantiate.Και αμέσως το δείχνει.

 

επίσης το redirect το κάνει μέσα απο το header

 

http://php.net/manual/en/function.header.php

 

Έχεις ήδη κάνει output html με τον πιο πάνω τρόπο άρα πρέπει να το αλλάξεις εκτός και αν κάνεις τα πάντα σχετικά με το modal dialog echo μέσα από την php including και την javascript που χρειάζεται.

Δημοσ.

Δεν μπορείς να το κάνεις.

 

Το bootstrap και τα modals του "ορίζονται" και ενεργοποιούνται (show/hide) από javascript που είναι client-side.

 

H php είναι "server side". "Εκτελείται" στον server και η απάντηση σε html στέλνεται στον client.

 

To αναφέρει και εδώ http://getbootstrap.com/javascript/#modals

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Κατάσταση</h4>
            </div>
            <div class="modal-body">
           <div class="alert alert-danger" role="alert"><i class="fa fa-times-circle"></i> <strong>
    <?php
    $msg = "";
    if($query_result < 0) {
     $msg = "Wrong username or Password";
     echo($msg);
    }
    else {
     echo "WELCOME ADMIN";
    }
    ?>
</strong></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
  <script>
$(document).ready(function () {
  $('#myModal').modal({
   show:false
  });
  $('#myModal').modal('show')
});
</script>

Δοκίμασε αυτό και δες τι σου βγάζει.

Δημοσ.

Όταν κάνει success η προσπάθεια σύνδεσης login τον πας στην σελίδα που είναι διαθέσιμη μόνο σε συνδεδεμένους χρήστες.

 

Αν δεν είναι επιτυχές το login τότε τον ξαναπάς στην σελίδα σύνδεσης με το error message που θες.

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

Δημιουργία νέου λογαριασμού

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
  • Δημιουργία νέου...