Bootstrap 模式在用户控件上不起作用

Question

我有一个 ASP.NET 网页，它创建了一系列具有不同数据的用户控件。每个用户控件都使用 Bootstrap 3 个模态控件来提供更好的用户体验。我仔细检查了所有标签的格式是否正确。页面上的某些模态有效，但用户控件中的模态无效。

Answer 1

ASP 使用 runat="server" 的服务器控件在提供给客户端时将收到一个唯一的客户端 ID。这意味着任何使用 runat="server" 属性的模态对话框都可能失去与使用 data-target.

切换模态的元素的连接

例如，您的代码可以如下所示：

<button type="button" data-target="#modOverlay" id="btnShowOverlay" runat="server" class="btn btn-success btn-lg" data-toggle="modal">Show Modal</button>
<div class="modal fade" role="dialog" id="modOverlay" runat="server">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        Some Modal
      </div>
      <div class="modal-body">
        Some Info/Data
      </div>
    </div>
  </div>
</div>

如果将上述代码放在用户控件中，按钮和模式对话框 ID 都会因 runat="server" 而改变。

请注意，在用户控件中使用模式会导致类似的问题。如果在单个页面中使用同一版本的多个用户控件，则 data-target 可以重叠。通常，将使用要处理的第一个对话框。这意味着如果您在对话框中有一个服务器控件，例如一个按钮，那么您可能运行遇到点击错误的服务器按钮的问题。

修复

这是我解决问题的方法。请注意，只有当以模式为目标的按钮（或任何控件）位于同一层控件（即用户控件、网页）内时，这才会有效。

// Fix all dynamically generated controls' modal buttons
$(document).ready(function () { // Wait for the page to load all controls
  var fix_modals = $("button[data-toggle='modal'][data-target]"); // Get all <button> elements that target a modal
  for (var len = fix_modals.length, n = 0; n < len; n++) {
    var el = $('[id=' + fix_modals[n].id.slice(0,fix_modals[n].id.lastIndexOf("_") + 1) + fix_modals[n].getAttribute("data-target").slice(1) + ']'); // Try to find the modal using the button's data-target value and its own control prefix
    if (el != undefined) { // Verify that we found a control
      if (el.attr("role") == "dialog") { // verify that the control is a dialog
        fix_modals[n].setAttribute("data-target", "#" + el.attr("id")); // Fix the button's data-target to the client id
      }
    }
  }
});

Bootstrap 模式在用户控件上不起作用

Bootstrap Modal not working on User Control

asp.net

user-controls

bootstrap-modal

修复