使用局部视图打开模式

Question

我试图在按下按钮时打开模式。按钮和模态框位于运行作为局部视图的 cshtml 文件中。

LoginModal.cshtml:

<head>
    <link rel="stylesheet" href="~/Content/loginmodal.css">
    <script src="~/Scripts/loginmodal.js"></script>
</head>

<div class="wrapper">
    <!-- Modal button -->
    <button id="modBtn" class="modal-btn">Open Modal</button>
</div>

<!-- Modal -->
<div id="modal" class="modal">
    <!-- Modal Content -->
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <h3 class="header-title">Modal Header</h3>
            <div class="close fa fa-close"></div>
        </div>
        <!-- Modal Body -->
        <div class="modal-body">
            <h3>Hello</h3>
        </div>
        <div class="modal-footer">
            <h3>Modal Footer</h3>
        </div>
    </div>
</div>

loginmodal.js:

$(function () {
    // Vars
    var modBtn = $('#modBtn'),
        modal = $('#modal'),
        close = modal.find('.close'),
        modContent = modal.find('.modal-content');

    // open modal when click on open modal button 
    modBtn.on('click', function () {
        modal.css('display', 'block');
        modContent.removeClass('modal-animated-out').addClass('modal-animated-in');
    });

    // close modal when click on close button or somewhere out the modal content 
    $(document).on('click', function (e) {
        var target = $(e.target);
        if (target.is(modal) || target.is(close)) {
            modContent.removeClass('modal-animated-in').addClass('modal-animated-out').delay(300).queue(function (next) {
                modal.css('display', 'none');
                next();
            });
        }
    });

});

index.cshtml 中的某处：

...
@Html.Partial("LoginModal")
...

按钮在那里，但没有任何作用，我做错了什么？

Answer 1

您的 css 和 js 引用是：

<link rel="stylesheet" href="~/Content/loginmodal.css">
<script src="~/Scripts/loginmodal.js"></script>

打开按钮：

<div class="wrapper">
    <!-- Modal button -->
    <button id="modBtn" class="modal-btn">Open Modal</button>
</div>

应该放在 Index.cshtml 而不是登录部分视图中。

Answer 2

根据https://www.w3schools.com/bootstrap/bootstrap_modal.asp，您可以使用以下方法打开和关闭模态。

<div class="wrapper">
    <!-- Modal button -->
    <button id="modBtn" class="modal-btn" data-toggle="modal" data-target="#modal">Open Modal</button>
</div>

<!-- Modal -->
<div id="modal" class="modal">
    <!-- Modal Content -->
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <h3 class="header-title">Modal Header</h3>
            <div class="close fa fa-close"></div>
        </div>
        <!-- Modal Body -->
        <div class="modal-body">
            <h3>Hello</h3>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

使用局部视图打开模式

Opening a modal using a partial view

html

javascript

asp.net-mvc

partial-views