使用局部视图打开模态

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

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

Answer 2

您的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而不是登录局部视图中。

使用局部视图打开模态

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-04-20 02:52:42

解决方案2
-1 2018-04-20 01:52:23

使用局部视图打开模态

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-04-20 02:52:42

解决方案2 -1 2018-04-20 01:52:23

解决方案1
0 已采纳 2018-04-20 02:52:42

解决方案2
-1 2018-04-20 01:52:23