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

Answer 2

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-index css属性用于将叠加层放置在内容的顶部，而对话框放置在叠加层的顶部。自己做一个简单的模态对话是微不足道的：

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

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>

以下是您对Assitant链接的模式...



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

<div id="assitants_modal" class="modal fade"> <div class="modal-dialog modal-lg"> <div class="modal-content">  <div class="modal-header"> <h1>Header</h1> </div>  <div class="modal-body"> <p>Body</p> </div>  <div class="modal-footer modal-footer--mine"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

类似地，接下来的两个模态将用于Craft Fairs和Materials

Bootstrap Modal可点击的div

3 个答案: