将数据传递给引导模式

IT技术 javascript jquery asp.net-mvc twitter-bootstrap
2021-02-07 05:24:04

我有几个超链接，每个超链接都附有一个 ID。当我点击这个链接时，我想打开一个模态（http://twitter.github.com/bootstrap/javascript.html#modals），并将这个 ID 传递给模态。我在谷歌上搜索，但找不到任何可以帮助我的东西。

这是代码：

<a data-toggle="modal" data-id="@book.Id" title="Add this item" class="open-AddBookDialog"></a>

哪个应该打开：

<div class="modal hide" id="addBookDialog">
    <div class="modal-body">
        <input type="hidden" name="bookId" id="bookId" value=""/>
    </div>
</div>

用这段代码： 

$(document).ready(function () {
    $(".open-AddBookDialog").click(function () {
        $('#bookId').val($(this).data('id'));
        $('#addBookDialog').modal('show');
    });
});

但是，当我单击超链接时，没有任何react。当我提供超链接时<a href="#addBookDialog" ...>，模式打开得很好，但它不包含任何数据。

我跟着这个例子：How to pass values arguments to modal.show() function in Bootstrap

（我也试过这个：如何在模态对话框中设置输入值？）

6个回答

我认为您可以使用 jQuery 的.on事件处理程序来完成这项工作。

这是您可以测试的小提琴；只需确保尽可能多地扩展小提琴中的 HTML 框架，以便您可以查看模态。

http://jsfiddle.net/Au9tc/605/

HTML

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

Java脚本

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
     // As pointed out in comments, 
     // it is unnecessary to have to manually call the modal.
     // $('#addBookDialog').modal('show');
});
只是$(this).data('id');它本身是无价的！我不知道你可以用它获得数据属性。我每天都更喜欢引导程序！=P
2021-03-11 05:24:04
@LeonCullens - 我已经更新了小提琴和代码。它现在以您想要的方式工作吗？
2021-03-26 05:24:04
很好的答案 - 但这是modal('show')必需的吗？似乎data-toggle="modal"链接上的会解决这个问题。
2021-03-29 05:24:04
当我只有一个超链接时，这很好用，但我有多个超链接，每个超链接都有自己的 ID。我用另一个 ID 添加了第二个超链接，但模态总是具有第一个超链接的 ID。
2021-04-03 05:24:04
@Manatax -$(this).data()是 jQuery 的一部分。api.jquery.com/data/#data-html5
2021-04-03 05:24:04

如果您使用的是Bootstrap 3.2.0，这里有一个更简洁的方法。

链接 HTML

<a href="#my_modal" data-toggle="modal" data-book-id="my_id_value">Open Modal</a>

模态 JavaScript

//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {

    //get data-id attribute of the clicked element
    var bookId = $(e.relatedTarget).data('book-id');

    //populate the textbox
    $(e.currentTarget).find('input[name="bookId"]').val(bookId);
});

http://jsfiddle.net/k7FC2/

@treblaluche.currentTarget是被点击的元素，它取自 click 事件e。此行查找input具有名称的an并在bookId其上设置值。
2021-03-17 05:24:04
这应该是公认的答案。我经历了e.relatedTarget.dataset.myDataId。其实data-*都是存放在事件relatedTarget的dataset里面的。但是，我不知道哪个更快......
2021-03-30 05:24:04
$(e.currentTarget).find('input[name="bookId"]').val(bookId); 你能告诉我这是做什么的吗？因此，如果模态是打开的意味着输入名称 bookId 的值是单击它的值？
2021-03-31 05:24:04
更换$(this)与$(e.relatedTarget)伟大的作品
2021-04-06 05:24:04
这个应该是公认的答案，我试过$(this)但没有用，用$(e.relatedTarget)完成工作代替它。谢谢！
2021-04-06 05:24:04

这是我如何通过@mg1075 的代码实现它。我想要更通用的代码，以便不必为模态触发器链接/按钮分配类：

在 Twitter Bootstrap 3.0.3 中测试。

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" data-id="my_id_value">Open Modal</a>

Java脚本

$(document).ready(function() {

  $('a[data-toggle=modal], button[data-toggle=modal]').click(function () {

    var data_id = '';

    if (typeof $(this).data('id') !== 'undefined') {

      data_id = $(this).data('id');
    }

    $('#my_element_id').val(data_id);
  })
});
你可以使用!! $(this).data('id') 代替typeof $(this).data('id') !== 'undefined'
2021-04-08 05:24:04

如果您使用的是 bootstrap 3+，如果使用 Jquery，这可以进一步缩短。

HTML

<a href="#" data-target="#my_modal" data-toggle="modal" class="identifyingClass" data-id="my_id_value">Open Modal</a>

<div class="modal fade" id="my_modal" tabindex="-1" role="dialog" aria-labelledby="my_modalLabel">
<div class="modal-dialog" role="dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
        </div>
        <div class="modal-body">
            Modal Body
            <input type="hidden" name="hiddenValue" id="hiddenValue" value="" />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary">Yes</button>
        </div>
    </div>
</div>

查询

<script type="text/javascript">
    $(function () {
        $(".identifyingClass").click(function () {
            var my_id_value = $(this).data('id');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
</script>

Bootstrap 4.3 - 使用下面的代码片段 - 更多在这里

Show code snippet

其它你可能感兴趣的问题
上一篇如何在不使用库的情况下在 JavaScript 中的另一个元素之后插入一个元素？ 下一篇如何播放音频？