为什么我的Jquery模态与我的模态上的任何按钮关闭?

时间:2012-10-30 19:22:14

标签: javascript jquery asp.net button modal-dialog

我的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>

2 个答案:

答案 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属性来使它复杂一点,但我不会想到选择器无论如何都会有效。

相关问题