如何将值参数传递给 Bootstrap 中的 modal.show() 函数

Posted 2023-02-22

【中文标题】如何将值参数传递给 Bootstrap 中的 modal.show() 函数

【英文标题】：How to pass values arguments to modal.show() function in Bootstrap

【发布时间】：2012-05-09 21:54:50

【问题描述】：

我有一个页面显示当地咖啡馆的列表。当用户点击某个咖啡馆时，会显示一个模式对话框，其中已经预先填写了“咖啡馆名称”。该页面包含许多咖啡馆名称，表单应包含他点击的“咖啡馆名称”。

以下是生成为带有链接按钮的文本的咖啡馆名称列表

         <table class="table table-condensed  table-striped">
      <tbody>   
        <tr>
          <td>B&Js
          </td>
          <td>10690 N De Anza Blvd </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>

        <tr>
          <td>CoHo Cafe
          </td>
          <td>459 Lagunita Dr </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>


        <tr>
          <td>Hot Spot Espresso and Cafe
          </td>
          <td>1631 N Capitol Ave </td>
          <td>
              <a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>
          </td>
        </tr>

      </tbody>
    </table>

这里是模态表单

<div class="modal hide fade" id="createFormId"">
<div class="modal-header">
    <a href="#" class="close" data-dismiss="modal">&times;</a>
    <h3>Create Announcement</h3>
</div>
<div class="modal-body">
    <form class="form-horizontal" method="POST" commandName="announceBean" action="/announce" >
        <input type="hidden" name="cafeId" value="104" />
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="cafeName">Where I am Coding</label>
                <div class="controls">
                    <input id="cafeName" name="cafeName" class="input-xlarge disabled" type="text" readonly="readonly" type="text" value="B&amp;Js"/>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="date">Date</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" id="date" name="date" />
                    <p class="help-block"></p>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input type="submit" class="btn btn-primary" value="create" />
                    <input type="button" class="btn" value="Cancel" onclick="closeDialog ();" />
                </div>
            </div>
        </fieldset>
    </form>
</div>

问题是如何将实际值传递给模态表单的“值”属性？

<input type="hidden" name="cafeId" value="104" />

表单“show”事件由“onlick”事件触发

<a class="btn btn-primary" data-toggle="modal" onClick="$('#createFormId').modal('show')" >Announce</a>

【参考方案1】：

你可以这样做：

<a class="btn btn-primary announce" data-toggle="modal" data-id="107" >Announce</a>

然后使用jQuery绑定点击并发送Announce data-id作为modals中的值#cafeId:

$(document).ready(function()
   $(".announce").click(function() // Click to only happen on announce links
     $("#cafeId").val($(this).data('id'));
     $('#createFormId').modal('show');
   );
);

【讨论】：

效果很好，但我怎样才能获得淡入效果？与命令不同。

@Mittchel 很可能为时已晚，但如果您从 div 中删除 hide 类，您可以获得淡入淡出效果

我在他的原始代码中找不到".announce" 在哪里？

【参考方案2】：

使用

$(document).ready(function() 
    $('#createFormId').on('show.bs.modal', function(event) 
        $("#cafeId").val($(event.relatedTarget).data('id'));
    );
);

【讨论】：

@briansol：是的，通常你会使用'show'来设置一个值，因为你不需要等待 CSS 转换完成：link。答案已编辑。

【参考方案3】：

这就是我如何称呼我的模态

<a data-toggle="modal" data-id="190" data-target="#modal-popup">Open</a>

这是我在模态中获得价值的方式

$('#modal-popup').on('show.bs.modal', function(e) 
    console.log($(e.relatedTarget).data('id')); // 190 will be printed
);

【参考方案4】：

我想分享我是如何做到这一点的。在过去的几天里，我一直在思考如何将几个参数传递给引导模式对话框。经过多次头部抨击，我想出了一个相当简单的方法来做到这一点。

这是我的模态代码：

<div class="modal fade" id="editGroupNameModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div id="editGroupName" class="modal-header">Enter new name for group </div>
        <div class="modal-body">
          <%= form_tag(  action: 'update_group', port: portnum  ) do %>
          <%= text_field_tag( :gid, "",  type: "hidden" )  %>
          <div class="input-group input-group-md">
          <span class="input-group-addon" style="font-size: 16px; padding: 3;" >Name</span>
          <%= text_field_tag( :gname, "",  placeholder: "New name goes here", class: "form-control", aria: describedby: "basic-addon1")  %>
        </div>
        <div class="modal-footer">
          <%= submit_tag("Submit") %>
        </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

这是更改 gid 和 gname 输入值的简单 javascript：

function editGroupName(id, name) 
    $('input#gid').val(id);
    $('input#gname.form-control').val(name);
  

我只是在一个链接中使用了 onclick 事件：

//                                                                              ' is single quote
//                                                                                   ('1', 'admin')
<a data-toggle="modal" data-target="#editGroupNameModal" onclick="editGroupName(&#39;1&#39;, &#39;admin&#39;); return false;" href="#">edit</a>

onclick 首先触发，更改输入框的 value 属性，因此当对话框弹出时，值已就位以供表单提交。

我希望有一天这对某人有所帮助。干杯。

【讨论】：

这是 ruby​​ 语法。