Question

我正在尝试在Bootstrap v3.3.5中打开一个模态对话框，但我没有运气。单击我的链接时没有显示任何内容。

对于我做错了什么，我真的很感激。

以下是head部分中的脚本代码：

   $('body').on('click', '.modal-link', function (e) {
        e.preventDefault();
        $(this).attr('data-target', '#modal-container');
        $(this).attr('data-toggle', 'modal');
    });
    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
    $('body').on('click', '.modal-close-btn', function () {
        $('#modal-container').modal('hide');
    });
    //clear modal cache, so that new content can be loaded
    $('#modal-container').on('hidden.bs.modal', function () {
        $(this).removeData('bs.modal');
    });
    $('#CancelModal').on('click', function () {
        return false;
    });

这是DIV：

<div id="modal-container" class="modal fade"
     tabindex="-1" role="dialog">
    <div class="modal-content">
    </div>
</div>

这是应该打开这个模态的ActionLink（它被设置为一个按钮，但这应该没关系，它仍然附加了modal-link类）：

@Html.ActionLink("Approve Pending",
    "Home", "ViewApprovalModal",
    null, new { @class = "modal-link btn btn-success", style = "font-size: 17px;" })

最后，这是ActionLink在HomeController中调用的C＃代码，它只是返回模式应该显示的部分：

public ActionResult ViewApprovalModal() {
    return PartialView("_ApprovalModal");
}

单击ActionLink时没有任何反应，我在开发者控制台中得到 no 错误或任何其他类型的警告，这就是我很困惑的原因。它没有做任何错误。

Answer 1

您是否需要进行服务器端呼叫？如果不是，我会摆脱它并做这个客户端。

<button type="button" class="modal-link btn btn-success" 
        data-toggle="modal" data-target="#modal-container"
        style="font-size: 17px;">
    Approve Pending
</button>

@Html.Partial("_ApprovalModal")

你的模态可能需要以下div：

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>

除非您想编写自定义事件，否则您不需要任何其他JavaScript。

Answer 2

尝试在脚本中包含此内容

<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />

尝试关注Div

<div class="modal fade">
<div class="modal-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">Your title</h4>
  </div>
 <div class="modal-body">
 <p>Your Body&hellip;</p>
 </div>
</div>
</div>
</div>

MVC5中的Bootstrap模态

2 个答案: