Question

如何将数据属性或单击事件从Bootstrap模式传递到父窗体/窗口。

例如，

单击下面的输入框，模式将弹出具有数据属性

的div

<input type="text" name="menu_image_id" class="form-control" data-toggle="modal" data-target=".show_modal_w" />

<input type="text" name="menu_image_id_2" class="form-control" data-toggle="modal" data-target=".show_modal_w" />

模态窗口

<div class="modal fade show_modal_w" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div data-id="1"  data-dismiss="modal">Hello</div>
        <div data-id="2"  data-dismiss="modal">Welcome</div>
        <div data-id="3"  data-dismiss="modal">Morning</div>
    </div>
</div>

现在，当用户单击模式中的div（例如Hello，Welcome或Morning）时，我们需要将id值从modal传递到名为menu_image_id的父输入框。

我尝试使用下面的关闭函数，但无法将模态数据id获取到父窗口。

$('.show_modal_w').on('hidden.bs.modal', function (e) {
    $(e.relatedTarget);
})

Answer 1

我尝试的方式不同于你，

而不是捕捉hidden.bs.modal，我捕获div.on.click，而不是：

$('.show_modal_w').on('hidden.bs.modal', function (e) {
    $(e.relatedTarget);
})

我写了

$("body").on("click", ".show_modal_w div[data-id]", function() {
    $("input[name='menu_image_id']").val($(this).data("id") + " - " + $(this).text());
    $(".show_modal_w").modal("hide");
});

这是一个jsfiddle：https://jsfiddle.net/f9urohoo/ 我使用[name =＆＃34; menu_image_id＆＃34;]在输入中单击了div的id和文本，但您可以根据需要进行调整。

告诉我这是否是你想要的

如何将数据值从Bootstrap Modal传递给Parent表单

1 个答案: