在 ASP.NET MVC 4.5 中使用引导程序 4.1 创建模态
[英]Creating modal using bootstrap 4.1 in ASP.NET MVC 4.5
问题描述
I'm very, very new to .net or any kind of backend developing - I've seen other questions, but couldn't use it to my project.
我对 .net 或任何类型的后端开发非常非常陌生 - 我见过其他问题，但无法将其用于我的项目。
I need a simple modal that opens an Iframe.我需要一个简单的模式来打开 Iframe。
1 - I have created the modal main container in the index.cshtml 1 - 我在 index.cshtml 中创建了模态主容器
2 - I added the link action. 2 - 我添加了链接操作。 Here I also added the "data-target" and "data-toggle" that is usual to activate bootstrap modal.在这里，我还添加了通常用于激活引导模式的“数据目标”和“数据切换”。
3 - I Created a cotroller do return the view. 3 - 我创建了一个控制器来返回视图。
Then, when I click at the action link the usual modal layer appears, but without de modal content.然后，当我单击操作链接时，会出现通常的模态层，但没有模态内容。
And when I remove the "data-target" and "data-toggle" it takes me tothe actual modal page.当我删除“数据目标”和“数据切换”时，它会将我带到实际的模式页面。
So I think I'm missing something here, or I did not understand what else I need to do.所以我想我在这里遗漏了一些东西，或者我不明白我还需要做什么。
1 - In the main layout -> index.cshtml the modal container 1 - 在主布局中 -> index.cshtml 模态容器
<div class="fade modal" id=exampleModalLabel aria-hidden=true aria-labelledby=exampleModalLabel role=dialog tabindex=-1>
<div class=modal-dialog role=document>
<div class=modal-content></div>
</div>
</div>
<script>
$(function () {
$("[role=dialog]").on("show.bs.modal", function (a) {
$(this).find("[role=document]").removeClass().addClass("modal-dialog " + $(a.relatedTarget).data("ui-class"))
})
})
</script>
2 - My controller 2 - 我的 controller
public ActionResult Modal()
{
return View();
}
3 - My action link 3 - 我的操作链接
<li class="dropdown ">
@Html.ActionLink("Atendimento", "Modal", "Home", new { }, new
{
data_toggle = "modal",
data_target = "#exampleModalLabel"
})
</li>
4 - My modal.cshtml 4 - 我的 modal.cshtml
@{
ViewBag.Title = "";
}
<body>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Atendimento Online</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<style>
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
background-image: url("@Url.Content("~/Content/img/preloader.gif")");
background-repeat: no-repeat;
background-position: center;
}
.modal-body {
background: #fff;
}
</style>
<div id="pge">
<iframe name="iframeaten" src="LOCATION-HERE" height="100vh" width="100%" marginheight="0" style=" margin:0;" frameborder="0" scrolling="no"></iframe>
</div>
<div id="loading"></div>
<script>
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 4000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('pge', true);
show('loading', false);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn standard lightgrey" data-dismiss="modal">Fechar</button>
</div>
1 个解决方案
解决方案1
0 2020-07-27 15:42:49
Actually, I was trying the Hard way, I just needed to insert de modal content into the main container, since I did not neet to do any partial view.实际上，我正在尝试 Hard 方式，我只需要将 de modal 内容插入到主容器中，因为我不需要做任何局部视图。
<div class="fade modal" id=exampleModalLabel aria-hidden=true aria-labelledby=exampleModalLabel role=dialog tabindex=-1>
<div class=modal-dialog role=document>
<div class=modal-content>
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Atendimento Online</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<style>
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 1);
background-image: url("@Url.Content("~/Content/img/preloader.gif")");
background-repeat: no-repeat;
background-position: center;
}
.modal-body {
background: #fff;
}
</style>
<div id="pge">
<iframe name="CONTEN_HERE" height="100vh" width="100%" marginheight="0" style=" margin:0;" frameborder="0" scrolling="no"></iframe>
</div>
<div id="loading"></div>
<script>
function onReady(callback) { var intervalID = window.setInterval(checkReady, 4000);
function checkReady() { if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('pge', true);
show('loading', false);
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn standard lightgrey" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.