Javascript 将数据传递到引导模式

我有几个超链接，每个都有一个ID。当我点击这个链接时，我想打开一个modal（），并将这个ID传递给modal。我在谷歌上搜索，但找不到任何能帮助我的东西

代码如下：

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

但是，当我单击超链接时，什么也没有发生。当我给出超链接

（我也尝试过：）
我认为可以使用jQuery的事件处理程序来实现这一点

这是一把你可以测试的小提琴；只要确保尽可能多地扩展fiddle中的HTML框架，就可以查看模式


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>

<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>

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

在Twitter Bootstrap 3.0.3中测试。

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>

<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>



JAVASCRIPT

$(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');
});

$（文档）.ready（函数（）{
$（'a[data toggle=modal]，按钮[data toggle=modal]'）。单击（函数（）{
var数据_id=“”；
if（typeof$（this）.data（'id'）！='undefined'）{
data_id=$（this）.data（'id'）；
}
$（'my#u element_id'）.val（数据_id）；
})
});
如果您使用的是Bootstrap 3.2.0，这里有一种更简洁的方法

链接HTML

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

试试这个

$(function(){
 //when click a button
  $("#miButton").click(function(){
    $(".dynamic-field").remove();
    //pass the data in the modal body adding html elements
    $('#myModal .modal-body').html('<input type="hidden" name="name" value="your value" class="dynamic-field">') ;
    //open the modal
    $('#myModal').modal('show') 
  })
})

$（函数（）{
//单击按钮时
$（“#miButton”）。单击（函数（）{
$（“.dynamic field”）.remove（）；
//在添加html元素的模态体中传递数据
$（'#myModal.modal body'）.html（''；
//打开模型
$（'#myModal'）.modal（'show'））
})
})
如果您使用的是bootstrap 3+，那么如果使用Jquery，这可以进一步缩短

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>

<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>


&时代；
情态标题
模态体
不
对


JQUERY

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


$（函数（）{
$（“.IdentificationClass”）。单击（函数（）{
var my_id_value=$（this.data（'id'）；
$（“.modal body#hiddenValue”）.val（my_id_值）；
})
});
您的代码将使用正确的模式html结构


$（函数（）{
$（“.open AddBookDialog”）。单击（函数（）{
$（'#bookId'）.val（$（this.data（'id'））；
$（“#addBookDialog”）.modal（“show”）；
});
});

开放模态
您可以试试。在这里，您可以传递标题、消息、取消和提交等回调选项

要使用此插件，请包括SimpleBotStrapDialog.js文件，如下所示

<script type="text/javascript" src="/simpleDialog.js"></script>

具有回调功能

<script type="text/javascript>
$.simpleDialog({
    onSuccess:function(){
        alert("You confirmed");
    },
    onCancel:function(){
        alert("You cancelled");
    }
});
</script>

引导程序4.3-使用下面代码片段中的代码-更多


$（'examplemodel'）。on（'show.bs.modal'，函数（事件）{
让bookId=$（event.relatedTarget）.data（'bookId'）
$（this）.find（'.modal body input'）.val（bookId）
})
a.btn.btn-primary.open-AddBookDialog{color:white}

打开
接近
这是如何将id\u数据发送到模式：

<input
    href="#"
    data-some-id="uid0123456789"
    data-toggle="modal"
    data-target="#my_modal"
    value="SHOW MODAL"
    type="submit"
    class="btn modal-btn"/>

<div class="col-md-5">
  <div class="modal fade" id="my_modal">
   <div class="modal-body modal-content">
     <h2 name="hiddenValue" id="hiddenValue" />
   </div>
   <div class="modal-footer" />
</div>

使用jquery很容易做到这一点：

如果以下是您的锚定链接：



在模态显示事件中，您可以访问锚定标记，如下所示

<script type="text/javascript" src="/simpleDialog.js"></script>

//显示模式时触发
$（'#modal_id'）。on（'show.bs.modal'，函数（事件）{
//这里的参考标签是您的锚定标签
var reference_tag=$（event.relatedTarget）；
var id=参考标签数据（'id'））
// ...
// ...
})
我发现这种方法很有用：

创建点击事件：

$( button ).on('click', function(e) {
    let id = e.node.data.id;

    $('#myModal').modal('show', {id: id});
});

$('#myModal').on('show.bs.modal', function (e) {

     // access parsed information through relatedTarget
     console.log(e.relatedTarget.id);

});

创建show.bs.modal事件：

$( button ).on('click', function(e) {
    let id = e.node.data.id;

    $('#myModal').modal('show', {id: id});
});

$('#myModal').on('show.bs.modal', function (e) {

     // access parsed information through relatedTarget
     console.log(e.relatedTarget.id);

});

额外：

$( button ).on('click', function(e) {
    let id = e.node.data.id;

    $('#myModal').modal('show', {id: id});
});

$('#myModal').on('show.bs.modal', function (e) {

     // access parsed information through relatedTarget
     console.log(e.relatedTarget.id);

});

在show.bs.modal中创建逻辑以检查属性是否已解析，例如：
id:
（e.relatedTarget.hasOwnProperty（'id'）？e.relatedTarget.id:null）
Bootstrap 4.0提供了一个修改的选项
使用jquery的模态数据：

以下是文档上的脚本标记：

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

它在很大程度上起作用。对modal的唯一调用不起作用。
下面是对脚本的一个修改，它对我很有用：

$(document).on('show.bs.modal', '#exampleModal',function(event){
... // same as in above script
})

我发现这对我有用：

$(document).on('show.bs.modal', '#exampleModal',function(event){
... // same as in above script
})

在链接中：

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>


接近
例如，要更新href值，我会执行以下操作：

<a href="#myModal" data-toggle="modal" data-url="http://example.com">Show modal</a>

$('#myModal').on('show.bs.modal', function (e) {
    var url = $(e.relatedTarget).data('url');
    $(e.currentTarget).find('.any-class').attr("href", "url");
})


$（'#myModal'）.on（'show.bs.modal'，函数（e）{
var url=$（e.relatedTarget）.data（'url'）；
$（e.currentTarget）.find（'.any class'）.attr（“href”，“url”）；
})
当我只有一个超链接，但我有多个超链接，每个超链接都有自己的ID时，这可以正常工作。我添加了另一个ID的第二个超链接，但模态始终具有第一个超链接的ID。@LeonCullens-我已更新了小提琴和代码。它现在能按您想要的方式工作吗？回答得好-但是需要
modal（'show'）
吗？链接上的
data toggle=“modal”
似乎可以解决这个问题。只有
$（this.data（'id'）本身就是无价的！我不知道你可以用它来获取数据属性。我一天比一天更喜欢自举=P@Manatax-
$（this）.data（）
是jQuery的一部分$（e.currentTarget）.find（'input[name=“bookId”]'）.val（bookId）；你能告诉我这是干什么用的吗？因此，如果模态是打开的，这意味着输入名称bookId的值是右键单击的值？@treblaluch
e.currentTarget
是单击的元素，它取自单击事件
e
。此行找到一个名为
bookId
的
输入
，并设置其值。将
$（此）
替换为
$（e.relatedTarget）
效果很好这应该是可接受的答案。我浏览了
e.relatedTarget.dataset.myDataId
。事实上，
data-*
存储在事件相关目标的数据集中。然而，我不同意