asp.net-core - ASP.net Core 基本模式无法正确显示
问题描述
我一直在尝试显示一个基本的模式弹出窗口,但没有任何运气。随着淡入淡出,我看到页面内容向左移动,但模式是不可见的。当淡入淡出时,我会在整个屏幕上看到模态。我不知道为什么它在做什么。希望这里有人可以看到我做错了什么。
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome @User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
@*Method 1*@
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
@*End Method 1*@
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" asp-for="TemplateId" asp-items="Model.Templates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" @(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
<span id="templateDesc">@Html.Raw(Model.TemplateDesc)</span>
</div>
</div>
</div>
</div>
</div>
</div>
@section scripts {
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
我试过将模态代码放在不同的区域,但结果是一样的。我尝试将所有内容都放在 jsfiddle 中进行测试,但我不知道如何使用该站点。
解决方案
尝试使用以下代码进行测试:
<h1>Test</h1>
<!-- START: Header Banner -->
<div>
<img src="/img/default-header-img.jpg" class="img-responsive">
</div>
<!-- END: Header Banner -->
<!-- Message board area -->
<br>
<div class="container">
<div class="strap-card strap-person">
<h2 class="mb20">Message Board</h2>
<p>Welcome @User.Identity.Name, Let's get started...</p>
</div>
</div>
<!-- END: Message board -->
<div class="container">
@*Method 1*@
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
@*End Method 1*@
<div class="row">
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="templates">
<h4>Select a Template</h4>
<form id="frmTemplates" asp-action="return false" class="strap-form mb60">
<select id="selTemplates" class="form-control"></select>
<br />
<button type="button" id="btnStart" name="button" value="Start" @(ViewBag.DisableRangeStart == true ? "disabled='disabled'" : "") class="btn btn-primary">Start</button> <button type="button" id="btnStop" name="button" value="Stop" class="btn btn-primary">Stop</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="strap-card strap-person text-center">
<div class="strap-card-text">
<div id="environment">
<h4>Environment Description</h4>
<br />
@*<span id="templateDesc">@Html.Raw(Model.TemplateDesc)</span>*@
</div>
</div>
</div>
</div>
</div>
</div>
@section scripts {
<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(function ()
{
$("#btnStart").click(function (e)
{
$("#loadingModal").modal();
setTimeout(function () { $("#loadingModal").modal("hide") }, 300000);
});
$("#btnStop").click(function (e)
{
});
});
</script>
}
推荐阅读
- ruby-on-rails - 如何在 Active Storage 测试中存根文件大小?(测试::单元)
- google-apps-script - 将“行带”主题应用于范围
- mysql - MySql 查询在现场超时但不在本地
- apache-spark - 将数据框保存到本地文件系统会导致空结果
- c# - 在dll中动态调用方法时如何使用依赖注入(统一)?
- excel - Range.Insert 仅在数据已存在时有效
- powershell - 如何从 PowerShell 获取换行符中的字节数?
- regex - 正则表达式匹配过去的标签,包括空字符串
- python - 在 Django 查询集上执行操作
- python - 当我尝试从函数发送和接收列表时,PyQt5 接口崩溃