如何知道在模式上按下关闭按钮时哪个按钮触发了模式
Posted
技术标签:
【中文标题】如何知道在模式上按下关闭按钮时哪个按钮触发了模式【英文标题】：How to know which button triggered the modal on pressing close button on modal 【发布时间】：2018-10-06 17:31:55 【问题描述】：<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Edit</button> <div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="savehtml(this)" data-dismiss="modal">Close</button>
</div>
</div>
</div>
function saveHTML()
//code
我有模态 html，并且我有几个按钮，所有这些都可以触发按钮，因为设置了 data-target 和 data-toggle 属性。但是在单击模态内的关闭按钮时，我如何确定哪个按钮触发了模态。触发模式的按钮没有唯一的 id，因为我必须使代码动态。所以必须使用'this'运算符。
【问题讨论】：
不要内联附加 JS 处理程序；将呈现与内容分开。改为使用适当的 javascript 附加它们，然后检查event.target 以识别源元素。
同一个页面有很多模态框吗？
不，只有一个。但是许多按钮可以触发模态但它们不能有唯一的 id 或类
【参考方案1】：
简单的解决方案1： 您可以添加自定义类以知道单击了哪个按钮，此解决方案将在按钮本身上添加该类，然后您可以识别它
$(document).ready(function()
$("button").click(function()
$(this).addClass("pressed");
);
);
简单的解决方案2： 点击按钮立即附加功能
$(document).ready(function()
$("button").click(function()
function .....//logic
);
);
我也有很多解决方案，但为此我需要看看你想要这个的目的是什么。
【讨论】：
【参考方案2】：使用js打开modal并存储目标元素。您可以打开以下链接进行测试。
https://jsbin.com/nejukidopi/1/edit?html,js,output
$(document).ready(function()
var currentBtn;
$('.my-edit-btn').on('click', function(event)
currentBtn = event.target;
$('#myModal').modal('show');
);
window.saveHTML = function()
alert($(currentBtn).text());
);<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><!-- Latest compiled and minified CSS -->
<body>
<button type="button" class="btn btn-success my-edit-btn">Edit 1</button>
<button type="button" class="btn btn-success my-edit-btn">Edit 2</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="saveHTML()" data-dismiss="modal">Save</button>
</div>
</div>
</div>
</div>
</body>【讨论】：
【参考方案3】：为按钮添加监听器，以便您确定哪个按钮显示为关闭模式
就我而言：
按钮：
<button class="close" id="close_modal_button" data-dismiss="modal">Close</button>
听众：
$('#close_modal_button').on('click', function()
$(event).val(String(event.dataset['value']));
);
【讨论】：
以上是关于如何知道在模式上按下关闭按钮时哪个按钮触发了模式的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有按钮的情况下关闭tkinter窗口而不完全关闭Python？
有没有一种方法可以在不使用 ANTD 上的默认按钮的情况下关闭 Modal？
如何通过按钮按下关闭和重新打开 viewController？