bootstrap 3:动态模态框

时间:2014-09-12 08:10:20

标签: javascript php jquery html twitter-bootstrap

在动态图像链接中单击并使用iframe模式框(图像管理器)选择图像后,我使用bootstrap 3.0模式框将show / add image url添加到输入框中。

PHP / HTML:

<div class="filesmap">
    <input id="video-12" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-12" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>

<div class="filesmap">
    <input id="video-90" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-90" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>

<div class="filesmap">
    <input id="video-80" class="form-control" type="text" name="video[]" value="'.$url.'">
</div> <span class="filesicon"><a id="video-80" data-target="#myModal" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>

在模态框(静态)中:

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body" style="padding:0px; margin:0px width: 560px;">
                <iframe width="560" height="400" src="/dialog.php?type=0&fldr=&field_id=video&&akey=dsflFWR9u2xQa" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
            </div>
        </div>
    </div>
</div>

现在,为了将模式框中的图片网址添加到输入框,我为输入框添加动态ID(例如:id="video-90")并与field_id(iframe src)同步。

我需要为动态iframe / src链接打开每个输入框的模态框,如下所示:

src="/dialog.php?type=0&fldr=&field_id=video-12&&akey=dsflFWR9u2xQa"

src="/dialog.php?type=0&fldr=&field_id=video-90&&akey=dsflFWR9u2xQa"

src="/dialog.php?type=0&fldr=&field_id=video-80&&akey=dsflFWR9u2xQa"

我的意思是点击链接模式打开后,相同的视频ID(iframe src)。

如何创建?

1 个答案:

答案 0 :(得分:0)

我不知道我是否理解你的问题 但如果你的意思是所有的模态包含相同的内容,请试试这个适合我的解决方案

1-每个模态的ID应该是不同的例子

<div class="modal fade" id="myModal-'different-id'">
...
</div>

2-这也应该反映在你触发模态

的数据目标中
data-target="#myModal-'different-id'"

3-我还建议使用此jquery函数*

触发模态
$(function () { $("[data-toggle='modal']").modal();});
  • 如果模态处于活动状态而不触发使用此功能

    $(function(){$(“[data-toggle ='modal']”)。modal(“hide”);});