Question

I'm trying to open a modal whenever a button is pressed. The button and modal are in an cshtml file that is ran as a partial view.

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();
            });
        }
    });

});

Somewhere in index.cshtml:

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

The button is there but doesn't do anything, what am I doing wrong?

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内，而不是登录部分视图。

Opening a modal using a partial view

2 个答案: