Question

我使用

string js = @" return confirm('Are you sure you want to do this?');"; myAspButton.OnClientClick = js;

点击“确定”后事件上升，而“取消”后没有任何反应

我想创建我的自定义模式，但是在单击任何按钮之前触发了服务器事件！

如何实现自己的功能，例如confirm(Are you sure you want to do this?')，该功能在单击按钮后会返回值？

我的代码：

string js = @"dialog('Are you sure you want to do this?',
            function() {
                        return true;
                    },
            function() {
                        return false;
                    }
        );";

        myAspButton.OnClientClick = js;

JS代码：

    function dialog(message, yesCallback, noCallback) {
        $('.title').html(message);
        var dialog = $('#modal_dialog').dialog();

        $('#btnYes').click(function() {
            dialog.dialog('close');
            yesCallback();
        });
        $('#btnNo').click(function() {
            dialog.dialog('close');
            noCallback();
        });
    }

HTML代码：

<div id='modal_dialog'>
<div class='title'>
</div>
<input type='button' value='yes' id='btnYes' />
<input type='button' value='no' id='btnNo' />

Answer 1

需要对代码进行一些修改... 您不能在同一元素上多次绑定click事件，否则它将触发多次，因此首先您需要删除该绑定，以使用另一个回调将其再次添加。

此外，您可以制作一个“覆盖层”，覆盖整个页面，直到单击某些按钮为止。请参阅css部分，看看我做了什么。

请参见下面的示例，并检查是否满足您的要求。

$("#dialogBtn").on("click", dialog.bind(this, 'Are you Sure?', yesCallback, noCallback));

function dialog(message, yesCallback, noCallback) {
      var modal = $("#modal_dialog");
      modal.show();
      $('.title').html(message);
            
      $('#dialogBtnYes').off("click").on("click", function() {
           modal.hide()
           yesCallback.call();
      });
      $('#dialogBtnNo').off("click").on("click", function() {
            modal.hide()
            noCallback.call();
      });
}

function yesCallback(){
  console.log("YES");
}
function noCallback(){
  console.log("NO");
}

#modal_dialog{
  display: none;
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0, 0.1);  
  z-index: 1000;
  position: absolute;
  top: 0;  
  left: 0;
}

#modal-content{
  padding: 12px;
  border: 1px solid;
  box-shadow: 1px 1px 3px black;
  background-color: #fff;
  margin: auto;
  position: relative;
  width: 50%;
  top: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Dialog' id="dialogBtn"/>

<div id='modal_dialog'>
  <div id="modal-content">
    <div class='title'></div>
    <input type='button' value='yes' id='dialogBtnYes' />
    <input type='button' value='no' id='dialogBtnNo' />
  </div>
</div>

类似于confirm（“您确定吗？”）JavaScript

1 个答案: