自定义确认功能

时间:2018-05-06 20:35:00

标签: javascript jquery html

我一直在寻找确切的默认确认按钮如何工作无济于事,如果有人有任何好的技术文档,将不胜感激。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="alertContainer">
  <h1 id="alertHeader">
    <center>Alert!</center>
  </h1>
  <p id="alertText">Test Text</p>
  <center>
    <button id="alertButton1" class="alertButtons" onclick="showAlert()">Confirm</button>
    <button id="alertButton2" class="alertButtons" onclick="showAlert()">Cancel</button>
  </center>
</div>

<div id="alertOverlay"></div>
{{1}}

我已经让我的功能自动确认,但显然我需要该功能等待用户做出决定。

confirm()是javascript中的默认函数我相信。我通过创建一个具有相同名称的函数来覆盖该函数。我做了这个,所以我可以使用警报(也是我覆盖的默认功能)一致地设置它。

在函数commitRow(btn)中,我将表中的数据提交到我们的数据库中。 默认情况下,如果(确认(“”)将等待用户按下确定或取消。我需要我的确认行为方式相同。显示提醒和提醒对问题不是很重要,注意confirm函数和commitRow函数中的注释。 先谢谢你了

1 个答案:

答案 0 :(得分:0)

这里只是修改您的代码,这是您的问题的答案。当然你必须添加一些css样式和js逻辑。

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <button id="show alert" class="alertButtons" onclick="showAlert()">Show popup</button>
        <div id="alertContainer" style="display: none;">
          <h1 id="alertHeader">
            <center>Alert!</center>
          </h1>
          <p id="alertText">Are you sure you would like to commit this row</p>
          <center>
            <button id="alertButton1" class="alertButtons" onclick="confirm()">Confirm</button>
            <button id="alertButton2" class="alertButtons" onclick="cancel()">Cancel</button>
          </center>
          <div id="alertOverlay"></div>
        </div>

    <script>
        function showAlert() {
            var container = document.getElementById("alertContainer");
            var overlay = document.getElementById("alertOverlay");
            if (container.style.display === "block") {
                container.style.display = "none";
                overlay.style.display = "none";
            } else {
                container.style.display = "block";
                overlay.style.display = "block";
            }
        }

        function confirm() {
          showAlert();
          commitRow();
        }

        function commitRow() {
            console.log("Commit row");
            //does stuff
        }

        function cancel() {
            console.log("Cancel");
            //does stuff
        }

    </script>
    </body>
    </html>