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中的任何内容。这是一个非常简单的示例，我们正好演示了这个过程，但是我们只是在预先存在的名为<img>的DIV中创建#msg标签，而不是将其放入Bootstrap模式的框架中。

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而不是{{ 1}} div：

#msg

触发模式显示：

jsFiddle Next Demo

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

请注意，在此示例中，我使用$('.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选择器，并使用该className在每个图像上创建了一个类

这个新示例向您展示了如果用户点击'.mod-trigger'标记时如何触发模式：

jsFiddle Demo

请注意，<a>标记的默认操作是导航到另一个页面。你不想要这个，所以你必须做的第一件事就是抑制这种默认行为：

<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'); });标记添加了一个className，以便于检测点击。

将信息传递给数据库中的Bootstrap模式

1 个答案: