javascript - 我将如何填充 Bootstrap 模式?
问题描述
我正在尝试学习使用 Bootstrap 和 JQuery。对于我当前的项目,我试图让用户与 Modals 进行交互。我注意到 Bootstrap 框架提供了其特定模式的使用。我必须了解如何实现这一点,直到这种模式的人口。
假设我想防止一遍又一遍地添加相同的元素(我只想使用一个元素来减少重复代码),我想我想使用 JQuery 来使用单个模式并将其填充到任何内容上事件被触发。对于这个例子,我将使用按钮和点击事件。
当我单击按钮时,它应该使用单击事件中提供的 HTML 填充分配给按钮的模式。我知道有几种方法可以实现这一点,例如使用 AJAX 检索包含 HTML 的视图或使用 JQuery和hide()
函数:clone()
show()
$(document).ready(function() {
//On initialization:
//Store modal initial values so they can be reset when closed:
let modalMediumInit = $(".modal.bs-example-modal-md").html();
let modalLargeInit = $(".modal.bs-example-modal-lg").html();
let modalSmallInit = $(".modal.bs-example-modal-sm").html();
//On modal close:
$(".modal.bs-example-modal-md").on("hidden.bs.modal", function() {
//Reset modal to initial values:
$(".modal.bs-example-modal-md").html(modalMediumInit);
});
$(".modal.bs-example-modal-lg").on("hidden.bs.modal", function() {
//Reset modal to initial values:
$(".modal.bs-example-modal-lg").html(modalLargeInit);
});
$(".modal.bs-example-modal-sm").on("hidden.bs.modal", function() {
//Reset modal to initial values:
$(".modal.bs-example-modal-sm").html(modalSmallInit);
});
$("#my-element").hide();
//On interaction:
$(".controls").on("click", "#my-control", function() {
//Populate modal .modal-body element...
//Currently using JQuery:
let html = $("#my-element").clone();
$(".modal.modal.bs-example-modal-lg .modal-content .modal-body").html(html);
$(".modal.modal.bs-example-modal-lg .modal-content .modal-body #my-element").show();
//Or (AJAX might return some HTML and set it into the html variable):
html = "<p>A very long string containing all my required html</p>";
//$(".modal.modal.bs-example-modal-lg .modal-content .modal-body").html(html); //<-- Uncomment following to see effect.
});
});
#my-element button {
margin-top: 2px;
margin-bottom: 2px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="my-element">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Foo
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Foo
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Foo
</button>
</div>
</div>
</div>
<div class="controls">
<button id="my-control" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">
Populate and open...
</button>
</div>
<br />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal bs-example-modal-md fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal bs-example-modal-lg fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
<div class="modal bs-example-modal-sm fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
每当我使用 JQuery 方法时,提供的用于填充模式的元素将在页面加载时加载(我注意到这个元素也会出现一小段时间,然后它会被提供的 JQuery 代码隐藏,这对我来说似乎不需要)。这会是填充 Bootstrap 模式的错误解决方案吗?我最近读了很多关于 AJAX 的内容,在这种情况下我应该利用它来将 HTML 加载到我的模式中吗?
解决方案
我已经修改了您的代码并创建了一个快速演示。请检查以下代码。
编辑:我添加了数据属性来传递模态大小以及要加载的内容。
$(document).ready(function() {
//On initialization:
//Store modal initial values so they can be reset when closed:
let modalContentInit = $(".bs-example-modal-md .modal-body").html();
//On modal close:
$(".modal.bs-example-modal-md").on("hidden.bs.modal", function () {
//Reset modal to initial values:
$("#myModal .modal-body").html(modalContentInit);
$('#myModal .modal-dialog').attr('class','modal-dialog');
});
$('#myModal').on('show.bs.modal',function(e){
var button = $(e.relatedTarget);
var modalContentClass = button.data('content');
var modalSize = button.data('size') ? ' modal-' + button.data('size') : '';
$('#myModal .modal-dialog').attr('class','modal-dialog' + modalSize);
$('#myModal .modal-body').html($(modalContentClass).clone());
$('#myModal .modal-body ' + modalContentClass).removeClass('hide');
});
});
.my-element button {
margin-top: 2px;
margin-bottom: 2px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="my-element my-element-foo hide">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Foo
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Foo
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Foo
</button>
</div>
</div>
</div>
<div class="my-element my-element-bar hide">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Bar
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Bar
</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary btn-block">
Bar
</button>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-foo">
Modal 1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-foo" data-size="sm">
Modal 1 small
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-foo" data-size="lg">
Modal 1 large
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-content=".my-element-bar">
Modal 2
</button>
<!-- Modal -->
<div class="modal bs-example-modal-md fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
推荐阅读
- android - 无法访问 Google Play 权限声明表
- .net-standard - Microsoft.Azure.Kusto.Data.NETStandard 包中缺少 WithAadUserPromptAuthentication
- java - 仅使用 xml 的带圆角的 ImageButton?
- ios - OneSignal 使用 CocoaPods 依赖管理器破坏了 PhoneGapBuild
- c# - Entity Framework 6 和 .NET Core 应用程序
- php - 注意:未定义的偏移量:2
- android - 如何运行 130 个 AsyncTasks?
- android - 哪个是创建自定义导航抽屉并在运行时添加项目的最佳方法?
- selenium - chromedriver解压后没有.exe
- angular - 如何从父组件刷新我的数据?