我的Jquery Modal工作得很好但是,当我点击一个不应该关闭模态的按钮时它会关闭模态?可以是按钮自动刷新页面导致模态关闭吗?我怎样才能克服当前的这个问题?
这是剧本:
<script>
$(document).ready(function () {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#F7F7F7',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
var buttons = $("#yesno button").click(function (e) {
// get user input
var yes = buttons.index(this) === 0;
// do something with the answer
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
});
});
</script>
这是按钮(触发器):
<asp:Button class="modalInput" rel="#yesno" ID="modalInput" runat="server" BackColor="#525663" BorderColor="#999999"
BorderStyle="Solid" BorderWidth="1pt" CommandName="MoveNext" Font-Size="Large"
ForeColor="White" Style="font-family: Segoe UI; margin-left: 0px; position: relative;
top: 25px; left: -25px; width: 152px; height: 41px;" Text="Edit Information" />
这是模态:
<div class="modal" id="yesno">
<h2>Edit Account Information:</h2>
<Uc2:EditCurrentSet ID="EditCurrentSet" runat="server" />
<a class="close"></a>
</p></div>
* 我的回报是假的;在正确的地方?:如果我在结果仍然没有变化! *
<script>
$(document).ready(function () {
var triggers = $(".modalInput").overlay({
// some mask tweaks suitable for modal dialogs
mask: {
color: '#F7F7F7',
loadSpeed: 200,
opacity: 0.9
},
closeOnClick: false
});
var buttons = $("#yesno button").click(function (e) {
// get user input
var yes = buttons.index(this) === 0;
// do something with the answer
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
return false;
});
return false;
});
</script>
答案 0 :(得分:2)
是的,你的return false;
在错误的地方。而不是return false;
,请使用事件的preventDefault
函数:
var buttons = $("#yesno button").click(function (e) {
e.preventDefault();
// get user input
var yes = buttons.index(this) === 0;
// do something with the answer
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
return false;
});
该按钮正在提交,因为webforms的性质。使用preventDefault
(或return false;
,如果您愿意),将阻止其发布到服务器,这是asp:Button
的默认操作。
答案 1 :(得分:1)
如果您更改了事件处理程序以返回false并且它仍然无法正常工作,那么您就不会选择正确的按钮。我认为你的选择器应该是这样的:
var buttons = $("#modalInput").click(function (e) {
// get user input
var yes = buttons.index(this) === 0;
// do something with the answer
triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
return false;
});
选择器中的#表示您正在尝试按ID查找按钮 - 您可以查看该按钮的呈现HTML(在您喜欢的浏览器中查看源/ Web开发人员工具)并自行检查ID。你通过在按钮上添加一个rel属性来使它复杂一点,但我不会想到选择器无论如何都会有效。