我能够克隆一个新的模态并启动它。
但是,是否可以通过单击或切换来远程启动新克隆的模态?
我想重新创建的步骤:
用户单击“克隆”以克隆模式
Javascript克隆模式并重命名适当的标签(按钮和模式标签)
用户单击“远程模态2触发器”以远程触发“启动演示模态2”按钮
这是小提琴:http://jsfiddle.net/hde13s2t/33/
如果直接单击,“启动演示模态2”按钮将起作用。但是,如果单击“远程模态2触发器”,则不会触发。
答案必须是远程的,因为我将为许多不同的模式设置触发器。
以下是我的javascript:
$(document).on("click", "#clicktoclone", function() {
var secondmodal = $("#launchmodal1").clone();
// updating button id and data-target for modal 2
secondmodal.find("#examplemodalbutton1").attr("id", "examplemodalbutton2").attr("data-target", "#exampleModal2").html("Launch demo modal 2");
// updating modal id for modal 2
secondmodal.find("#exampleModal1").attr("id", "exampleModal2");
secondmodal.appendTo('#launchmodal2');
// set new click event to show the cloned modal
});
$(document).on('click', '.launchmodal', function() {
var targetSelector = $(this).data('target');
$(targetSelector).modal();
});
$(document).on('click', '#remotemodal', function() {
var targetSelectorid = $(this).attr("value");
$("#exampleModal"+targetSelectorid).trigger("toggle");
});
下面是html
<div id="launchmodal1">
<button type="button" class="launchmodal btn btn-primary" data-toggle="modal" id="examplemodalbutton1" data-target="#exampleModal1">
Launch demo modal 1
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-secondary" id="clicktoclone">Clone</button>
<div id="launchmodal2"><BR><BR>
<button type="button" class="btn btn-success" id="remotemodal" value="2">Remote modal 2 trigger</button>
</div>
答案 0 :(得分:1)
除了打开克隆模态的功能以外,您都已正确完成所有操作。
在您的#remotemodal
中单击事件处理程序,而不是:
$("#exampleModal"+targetSelectorid).trigger("toggle");
使用:
$("#exampleModal"+targetSelectorid).modal("show");
或者,如果您想模拟像用户一样点击Launch demo modal 2
按钮(与您的问题更相关),请将上面的行替换为:
$("#examplemodalbutton"+targetSelectorid).trigger("click");