将信息从数据库传递到引导模式

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

我的控制器设置了以下功能

<?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 中接收/处理。有关 AJAX 的更多信息，请参阅this SO post。

不过，这个问题也不需要使用 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() 方法在 Bootstrap 模式内创建一个 <img> 标记，替换该特定 DIV 中的任何内容。这是一个非常简单的示例，我们准确地演示了此过程，但我们没有将其放入 Bootstrap 模态框架的框架中，而是在名为 #msg 的预先存在的 DIV 中创建 <img> 标签。

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() 以查看每次单击图像时都会注入不同的参数#msg div -- 你会得到你点击的<img> 的正确参数。

---

现在，您需要做的就是将（通过html() 方法） 将新创建的<img> 标签注入到相应的Bootstrap div 中，而不是注入#msg div 中：

$('.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> 标签添加了一个类名，以便于检测点击。