Bootstrap 模态可点击 div答案

【问题标题】：Bootstrap Modal clickable divBootstrap 模态可点击 div
【发布时间】：2015-08-29 11:56:31
【问题描述】：

我正在尝试制作一个可点击的 div，它会打开一个模式。 div 上有一个背景图像类。当您单击图像时，将弹出一个模态框，其中包含模态框内的图库。我很难弄清楚这一点。我不确定触发器在哪里。我是否使用引导按钮触发器？每个“盒子”上都有一个背景图像。我到目前为止的代码是：

<div class="row no-side-padding">
<div class="col-sm-3 no-side-padding-2">
<div class="assistants-box">
<h2>Assistants</h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="chairs-box">
<h2>Chairs</h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="craft-fairs-box">
<h2>Craft Fairs</h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="materials-box">
<h2>Materials</h2>
</div>
</div>
</div>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这是Bootstrap's Docs 中解释的地方。

你可以使用JS或者HTML的方式。

JS：

基本上你应该在点击时调用：

$('#myModal').modal('show');

HTML方式：

在按钮上：

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

在锚点上：

其他标记：

<div id="myModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Header -->
                <div class="modal-header">
                    <h1>Header</h1>
                </div>

                <!-- Body -->
                <div class="modal-body">
                    <p>Body</p>
                </div>

                <!-- Footer -->
                <div class="modal-footer modal-footer--mine">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

【讨论】：

我不确定该代码应该放在哪里。或者放在哪里 data-toggle="modal" data-target="#myModal"
这就是html的方式。您应该将它们放在要单击以打开的元素上。并将#myModal 替换为您的模态ID。
你好 Stefan 工作。当我单击照片时，模式会弹出。我有另一个问题要问你。当模式弹出时，我希望在其中弹出一个带有上一个和下一个按钮的图像。像这样：fearlessflyer.com/…
该页面上的代码对我不起作用，因为它从页面上的 li 中提取图像。我该如何让它从服务器上的文件夹中提取图像？？

【解决方案2】：

这是最简单的方法...

<code>
<div class="row no-side-padding">
<div class="col-sm-3 no-side-padding-2">
<div class="assistants-box">
<h2><a href="" data-toggle="modal" data-target="#assistants_modal">Assistants</a></h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="chairs-box">
<h2><a href="#chairs_modal" data-toggle="modal" data-target="#chairs_modal">Chairs</a></h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="craft-fairs-box">
<h2><a href="#craft_fairs" data-toggle="modal" data-target="#craft_modal">Craft Fairs</a></h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="materials-box">
<h2><a href="#target_modal" data-toggle="modal">Materials</a></h2>
</div>
</div>
</div>
</code>

以下是您的椅子链接模式...

<code>
<div id="chairs_modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Header -->
<div class="modal-header">
<h1>Header</h1>
</div>

<!-- Body -->
<div class="modal-body">
<p>Body</p>
</div>

<!-- Footer -->
<div class="modal-footer modal-footer--mine">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</code>

以下是您的助手链接模式...

<div id="assitants_modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Header -->
<div class="modal-header">
<h1>Header</h1>
</div>

<!-- Body -->
<div class="modal-body">
<p>Body</p>
</div>

<!-- Footer -->
<div class="modal-footer modal-footer--mine">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

类似地，接下来的两个模态将用于工艺博览会和材料

【讨论】：

【解决方案3】：

Simplistic jsFiddle Demo

首先，您必须重组 HTML。像这样的：

<div class="col-sm-3 no-side-padding-2">
    <h2>Assistants</h2>
    <div id="assistants-box" class="modal_box">
        Contents of the ASSISTANTS box
    </div>
</div>

请注意，可点击（可见）标签位于模态 DIV 之外。

模态 DIV 没有什么神奇之处；它只是一个普通的、隐藏的 DIV，会显示 (.show())，而其他所有内容都被覆盖。一般z-indexcss 属性用于将叠加层放置在内容之上，将对话框放置在叠加层之上。自己制作一个简单的模态对话框很简单：

http://jsfiddle.net/07bvb5Lz/

当模态 DIV 显示时，它的 DIV 只是未隐藏。 Bootstrap 和 jQueryUI 之类的库可以自动执行这个简单的任务，还可以添加一些格式 - 外边框、居中等 - 但 DIV 的内容会按照格式显示。

要将内容注入模式对话框，请使用.html() 方法或类似方法。例如，单击触发器元素（按钮、div 等）可以启动一个 AJAX 事件，该事件从数据库查找中请求数据，对其进行格式化，然后（在成功回调中）在显示之前将其粘贴到模态 div 中。

http://jsfiddle.net/07bvb5Lz/1/

最后，这是一篇了解 AJAX 基础知识的帖子——它真的很简单。

AJAX request callback using jQuery

上述示例的 AJAX 代码块如下所示：

http://jsfiddle.net/07bvb5Lz/2/

您的 PHP 处理器文件（我们将其命名为 your_php_processor_file.php）将如下所示：

<?php
    $el = $_POST['elementID']; //value will be contents of js variable myId

    //Do your mysql lookup using the received value
    $mysql_recd = 'do_your_lookups_here';
    if ($mysql_recd = 'bob'){
        $tmp = 'http://placekitten.com/450/330';
    }else{
        $tmp = 'http://placekitten.com/450/320';
    }

    $out = '
        <img src="' .$tmp. '" />
        <input type="button" id="shutme" value="Close" />
    ';
    echo $out;
?>

【讨论】：