2016-12-10 1 views
0

erhalte ich eine Funktion ist, wenn Kunde den quickview Knopf anklickt, den es geöffnet wird das modale hat eine Information über dieses Produkt, aber ich kann nicht dieses tun, ich versuche etwas Methode funktioniert aber nicht, also bitte hilf mir.codeigniter wie man Infomation einer Reihe

Das ist meine Ansicht:

 <div class="row"> 
       <h4>Feauture Product</h4> 
      </div> 
      <form method="post"> 
      <div class="row"> 
       <div class="product"> 
        <?php foreach ($infolist as $info_key){ ?> 
        <div class="col-sm-6 col-md-3"> 
        <div class="thumbnail"> 
         <a href="<?php echo base_url();?>index.php/product/viewpd/<?php echo $info_key->id; ?>"><img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive"></a> 
         <div class="caption"> 
         <h5 class="text-justify">Name product: <?php echo $info_key->name; ?></h5> 
         <p class="text-justify">Price: <?php echo $info_key->price.' VNĐ'; ?></p> 
         <p class="text-center"> <a href="javascript:;" onclick="tocart(<?php echo $info_key->id ?>)" class="btn btn-success" data-toggle="modal" data-target=".bs-example-modal-sm" ><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> Buy Now</a><a href="#" class="btn btn-danger" role="button" data-toggle="modal" data-target="#myModal"><i class="fa fa-eye" aria-hidden="true"></i> Quick View</a></p> 
         </div> 
        </div> 
        </div> 
        <?php }?> 
       </div> 

       <!-- Small modal alert when click add cart --> 
       <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
        <div class="modal-dialog modal-sm" role="document"> 
        <div class="modal-content"> 
         <div class="modal-header" style="padding:5px 10px 5px 10px;"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4> 
         </div> 
         <div class="modal-body"> 
         <h5>Added product to your cart!</h5> 
        </div> 
        </div> 
       </div> 
      </div> 

      <!-- Modal quickview --> 
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
       <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
        </div> 
        <div class="modal-body"> 

        </div> 
        <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Save changes</button> 
        </div> 
       </div> 
       </div> 
      </div> 

, wenn ich in für jede Schleife modal quickview Code setzen sie zuerst Produkt

+0

Beachten Sie, dass es am besten ist, '' ' 'anstelle von' '' 'in Template-Code (das PHP und HTML mischt) wegen besserer Lesbarkeit. – DLight

+0

Ich habe das in meiner Antwort unten geändert, aber vergessen, es zu erwähnen. Gute Erinnerung für alle auch. –

Antwort

0

zu öffnen, was Sie gerade Anzeige von Informationen haben über Sie das öffnen müssen werden modal mit

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

Achten Sie besonders auf das 'Datenziel'. das muss die ID Ihres modalen div entsprechen:

<div class="modal fade" id="myModal"... <--- 

Wenn Sie mehrere Produkte auf der gleichen Seite die beste Wahl haben wird modals programmatisch mit Bootstrap JS Modal.js Plugin zu erzeugen

http://getbootstrap.com/javascript/#modals

bearbeiten

Dies ist eine Möglichkeit zu tun, was ich glaube, dass Sie suchen. Ich habe vielleicht ein variables Echo verpasst, aber die Grundlagen sind da.

<?php foreach ($infolist as $info_key): ?> 
     <div class="col-sm-6 col-md-3"> 
       <div class="thumbnail"> 
        <a href="<?php echo base_url();?>index.php/product/viewpd/<?php echo $info_key->id; ?>"><img src="http://wingsacessorios.com.br/public/img/vertical/img-home05.jpg" class="img-responsive"></a> 
        <div class="caption"> 
        <h5 class="text-justify">Name product: some product</h5> 
        <p class="text-justify">Price: 12 VND</p> 
        <p class="text-center"> <a href="javascript:;" onclick="tocart(<?php echo $info_key->id; ?>)" class="btn btn-success" data-toggle="modal" data-target="#cartModal<?php echo $info_key->id; ?>" ><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> Buy Now</a> <a href="#" class="btn btn-danger" role="button" data-toggle="modal" data-target="#myModal<?php echo $info_key->id; ?>"><i class="fa fa-eye" aria-hidden="true"></i> Quick View</a></p> 
        </div> 
       </div> 
       </div> 

       <!-- Small modal alert when click add cart --> 
      <div class="modal fade bs-example-modal-sm" id="cartModal<?php echo $info_key->id; ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
       <div class="modal-dialog modal-sm" role="document"> 
       <div class="modal-content"> 
        <div class="modal-header" style="padding:5px 10px 5px 10px;"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel" style="background-color:transparent;color:#000000;">Alert from website !</h4> 
        </div> 
        <div class="modal-body"> 
        <h5>Added product <?php echo $info_key->id; ?> to your cart!</h5> 
       </div> 
       </div> 
      </div> 
     </div> 

     <!-- Modal quickview --> 
     <div class="modal fade" id="myModal<?php echo $info_key->id; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
       </div> 
       <div class="modal-body"> 
       <p>Product <?php echo $info_key->id; ?></p> 
       </div> 
       <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
       </div> 
      </div> 
      </div> 
     </div> 
    <?php endforeach ?> 
+0

Nein, ich meine, wie Infomation angezeigt wird, wenn Sie auf Schnellansicht klicken, es wird Display-Information dieses Produkts sein, Beispiel: ich habe 4 Produkt und wenn ich schnelle Ansicht von Produkt 1 klicke, zeigt das Modal Infomation von Produkt 1, Schnellansicht an 2 zeigt Infomation von Produkt 2 an .... das ist meine Bedeutung. –

+0

Gotcha ... Ich werde meine Antwort bearbeiten. –

+0

siehe Bearbeiten. Das ist eine Möglichkeit, dies im Bootstrap zu tun. –

Verwandte Themen