php - 将信息从数据库传递到 Bootstrap Modal

Question

只是一个简单的问题，询问是否有人可以帮助我。请查看我的索引页上的此部分:

            <?php foreach($galleries as $item) { ?>
        <div class="col-md-2">
            <p>Eagle Fruit <?= $item['gallery_name'] ?></p>
            <img src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" class="img-responsive">
            <a href="<?= base_url();?>view/<?= $item['gallery_name'];?>" data-toggle="modal" data-target="#gallery">View the Gallery</a>
        </div>
        <?php } ?>

我的 Controller 设置了以下功能

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Site extends MX_Controller {

public function __construct()
{
    parent::__construct();
    $this->load->model('gallery/Gallery_m');
}

public function index($id = 'ID')
{
    $data['title'] = 'Welcome to Eagle Fruit Alliance (Pty) Ltd';
    $data['galleries'] = $this->Gallery_m->get_galleries();
    $data['gallery'] = $this->Gallery_m->view($id);
    $data['content'] = 'index_view';
    $this->load->view('templates/site/template',$data);
}}

现在，当我单击链接时，我希望画廊以模式打开，我将如何实现这一目标？我添加了一个带有以下代码的模式，我哪里出错了:

模态

            <!-- Modal -->
        <div class="modal fade" id="gallery" 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"><?= $gallery['name'];?></h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- ./Model -->

Answer 1

因为您正在与用户对图像的点击进行交互，所以这不是 PHP 或 HTML 问题。用户交互总是涉及 javascript/jQuery。

AJAX 是一种由两部分组成的方法。它在 javascript 中启动，并将数据发送到服务器端 PHP 文件，该文件执行某些操作并返回响应，该响应在 javascript 中接收/处理。请参阅this SO post有关 AJAX 的更多信息。

但是，这个问题也不需要使用 AJAX，因为没有额外的数据需要获取。

<小时/>

从您的代码中很难确切地了解如何触发模式。通常，我们会在代码中寻找共性，例如类名，以用作触发器。对于您的情况，您可以尝试:

$('p+img').click()

但是，我建议像这样修改您的代码:

<img class="mod_trig img-responsive" src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" >

注意:我将类移至标签前面只是为了使其在此答案中非常明显。如果您愿意，请将其保留在代码中的位置。

接下来，当单击触发器时，您将使用 CSS 选择器(jQuery 使用 CSS 选择器，因此请学习它们 - Bootstrap 使用 jQuery，因此请学习 jQuery) 来获取 href <a> 的属性标签——这是指向所需图像的直接链接，对吗？仅当页面上还没有可用的某些信息时，您才需要使用 AJAX，但在这种情况下，您已拥有所需的全部信息。

使用 jQuery 的 .html()创建 <img> 的方法Bootstrap 模式中的标签，替换该特定 DIV 中的任何内容。这是一个非常简单的示例，我们准确地演示了此过程，但我们没有将其放入 Bootstrap 模式的框架中，而是简单地创建 <img>位于名为 #msg 的预先存在的 DIV 内的标记.

jsFiddle Demo

$('p+img').click(function(){
    var i = $(this).next('a').attr('href');
    //alert(i);
    $('#msg').html('<img src="'+i+'" class="msg" width="200" height="200" />');
});

#msg{position:absolute;top:30%;left:40%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
	<p>This is a test</p>
	<img src="http://placeimg.com/98/100/animals" />
	<a href="http://placeimg.com/98/100/animals">View the Image</a>
</div>
<div>
	<p>This is a test</p>
	<img src="http://placeimg.com/100/95/animals" />
	<a href="http://placeimg.com/100/95/animals">View the Image</a>
</div>
<div>
	<p>This is a test</p>
	<img src="http://placeimg.com/95/95/animals" />
	<a href="http://placeimg.com/95/95/animals">View the Image</a>
</div>
<div id="msg"></div>

*这不是一个完美的示例，因为占位符图像网站在请求相同参数时不会提供相同的图像，因此您可以取消注释 alert()行可以看到，每次单击图像时，都会将不同的参数注入(inject) #msg div -- 您获得 <img> 的正确参数您点击的位置。

<小时/>

现在，您需要做的就是注入(inject)(通过 html() 方法)新创建的 <img>标记到适当的 Bootstrap div 而不是 #msg分区:

$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');

并触发模态显示:

jsFiddle Next Demo

$('.mod-trigger').click(function(){
   var i = $(this).next('a').attr('href');
    $('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
    $('#gallery-lightbox').modal('show');
});

请注意，在此示例中我如何将 CSS 选择器替换为 '.mod-trigger' ，并使用该 className 在每个图像上创建一个类

<小时/>

这个新示例向您展示了如何在用户单击 <a> 时触发模式。标签:

jsFiddle Demo

请注意 <a>标签的默认操作是导航到另一个页面。您不希望出现这种情况，因此您必须做的第一件事就是抑制该默认行为:

$('.mod-atag').click(function(e){
   e.preventDefault();
   var i = $(this).attr('href');
    $('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
    $('#gallery-lightbox').modal('show');
});

另请注意，我为每个 <a> 添加了一个 className标记以方便检测点击。