如何將數據值從Bootstrap模態傳遞到父窗體

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值從模式傳遞給名稱為menu_image_id的父輸入框。

我嘗試使用下面的關閉函數，但無法將模態數據ID移到父窗口。

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

Answer 1

我正在嘗試與您不同的方式，

我捕獲的是div.on.click，而不是捕獲hidden.bs.modal，因此，不是：

$('.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 =“ menu_image_id”]將id和div的文本放在輸入中，但是您可以根據需要進行調整。

告訴我這是否是你想要的