Opening a modal using a partial view
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?
2 answers
solution1
0 ACCPTED 2018-04-20 02:52:42
According to https://www.w3schools.com/bootstrap/bootstrap_modal.asp , you can use the following to open and close the modal.
<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>
solution2
-1 2018-04-20 01:52:23
Your css and js references which are:
<link rel="stylesheet" href="~/Content/loginmodal.css">
<script src="~/Scripts/loginmodal.js"></script>
And the button to open it:
<div class="wrapper">
<!-- Modal button -->
<button id="modBtn" class="modal-btn">Open Modal</button>
</div>
should be placed inside Index.cshtml instead of the login partial view.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.