Bootstrap Modal可点击的div

Question

我正在尝试使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>

Answer 1

这是在Bootstrap的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>

Answer 2

简化jsFiddle演示

首先，您必须重组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-index css属性用于将覆盖图放置在内容之上，而将对话框放置在覆盖图之上。 自己创建一个简单的模态对话框很简单：

http://jsfiddle.net/07bvb5Lz/

显示模态DIV时，其DIV仅处于隐藏状态。 像Bootstrap和jQueryUI这样的库可以自动完成此简单任务，还可以添加一些格式设置（外边界，居中等），但是DIV的内容在格式化时会显示出来。

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

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

---

最后，这是获得AJAX基础知识的帖子-它确实非常简单。

使用jQuery的AJAX请求回调

上面示例的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;
?>

Answer 3

这是最简单的方法...

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

同样，接下来的两种模式将用于手工艺品展览会和材料展览会