Question

我正在制作一个功能是当客户点击快速查看按钮时它将打开模态有关于该产品的信息，但我不知道如何做到这一点，我尝试了一些方法，但没有工作，所以请帮助我

这是我的观点：

        <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>

如果我为每个循环添加模态快速查看代码，它只显示第一个产品的信息

Answer 1

要打开上面的内容，您需要使用

打开模式

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

特别注意'数据目标'。必须与模态div的ID匹配：

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

如果您在同一页面上有多个产品，最好的办法是使用Bootstrap JS Modal.js插件以编程方式生成模态

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

修改

这是我认为你正在寻找的一种方式。我可能错过了一个变量回声，但基础知识就在那里。

<?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>  <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">×</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>  <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">×</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 ?>

codeigniter如何获取行的信息

1 个答案: