标签: bootstrap-modal
如何强制React组件重新渲染？
我们正在开发一个 POC，其中显示属性列表，并在单击属性标题时在引导模式弹出窗口中显示相应的属性详细信息。
我们有以下具有层次结构的 React 组件：
1 个属性框
1.1 属性列表
1.1.1 属性信息
1.2 Bootstrap Modal 弹出 HTML 中的 PropertyDetails。
PropertyBox 的 render 方法包含以下代码。
render() {
return (
<div id="property-box">
<PropertyListComponent>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg modal-box-large">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body modal-max-height">
{propertyDetailsElement}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>;
在属性详细信息组件中，有两个 bootstrap 4 选项卡 1. 概述（默认情况下处于活动状态） 2. 联系我们
问题是，
假设我通过单击“属性”标题打开了属性详细信息弹出窗口，然后转到“联系我们”选项卡并关闭了弹出窗口。
之后，我单击“下一个属性标题”以查看其属性详细信息。在这种情况下，弹出窗口将打开，显示相应的属性详细信息，但“联系我们”选项卡显示为活动状态。
因此，为了解决这个问题，我尝试使用方法“componentWillReceiveProps”重新渲染 PropertyDetails 组件
class PropertyDetail …推荐指数
解决办法
查看次数
Angular 9 Bootstrap 4 多步模态
我的 Angular 应用程序需要一个多步骤模式。我对 Angular 相当陌生，希望这将是一项简单的任务，但不幸的是我还没有找到任何解决方案。以前有人创建过吗？不确定我是否具备创建一个所需的技能。任何帮助表示赞赏。
推荐指数
解决办法
查看次数
如何使用 ajax 在 Rails 6 应用程序中显示 Bootstrap 4 模式？
目前，我对页面上的每个部分都有一个模态渲染。它有效，但我不想在每次加载页面时为每个部分呈现模式。
这是现在呈现我的模态的代码：
site/gallery.html.erb
<% @pieces.each_slice(3) do |pieces| %>
<div class="row">
<% pieces.each do |piece| %>
<div class="col-lg-4">
<%= image_tag (piece.images.joins(:blob).order('active_storage_blobs.filename ASC').first if piece.images.attached?), data: { toggle: "modal", target: "#modal#{piece.id}" }, class:"img-thumbnail mx-auto d-block img-size" %>
<p><%= piece.name %></p>
<p><%= piece.description %></p>
<%= render 'site/modal', piece: piece %>
</div>
<% end %>
</div>
<% end %>
这是模态部分：
site/_modal.html.erb
<div class="modal fade" id="modal<%=piece.id%>" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel"><%= piece.name %></h5>
<button type="button" …ruby-on-rails twitter-bootstrap bootstrap-modal bootstrap-4 ruby-on-rails-6
推荐指数
解决办法
查看次数
如果else语句没有效果 - javascript
我有一个包含注册表单的bootstrap模式框.我添加了一些代码,当按下提交按钮时,模式框会消失:
$(".dismiss-signup-modal").click(function () {
jQuery('#signup_modal').modal('hide'); }
});
这工作正常,但我想让模态框保持原样,如果注册表单的电话号码字段是空白的,只有在电话号码字段有值时才会消失,如下所示:
$(".dismiss-signup-modal").click(function () {
if ($('.signup-phone').length > 0) {
jQuery('#signup_modal').modal('hide'); }
else {}
});
但上面的代码没有做任何事情,如果电话号码字段留空,模态框仍然会消失.我已经尝试过我能想到的所有组合将if else语句放在函数外部或者创建一个新函数或者将.signup-phone变成var但没有任何作用,任何想法？谢谢
javascript jquery if-statement twitter-bootstrap bootstrap-modal
推荐指数
解决办法
查看次数
如何在css中设计tringle边框？
使用Html5,css3,Bootstrap我想像这样设计这个div
我对css很新.所以请帮帮我这样做？
推荐指数
解决办法
查看次数
jQuery onClick仅使用第一个按钮
我有这个jQuery
$("#rfidbutton").click(function() {
var rfid = $(this).data('rfidnumber');
$(".modal-body #rfidbox").val( rfid );
$("#rfidtitle").text( 'Save RFID - ' + rfid );
Cookies.set("rfid=" + rfid);
//Cookies.get("rfid");
});
按钮看起来像这样
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="1" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="2" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="3" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
<a class="btn btn-tertiary btn-xs" data-toggle="modal" href="#rfid" data-rfidnumber="4" id="rfidbutton"><i class="fa fa-id-card-o"></i> Click here</a>
问题是当单击按钮时,"1"始终保存在cookie中.如何获取单击按钮的data-rfidnumber ,而不是第一个？
推荐指数
解决办法
查看次数