jquery/javascript中设置焦点在确认框上的问题？

点击按钮，我需要看到一个自定义确认对话框。我可以看到它，但一旦对话框打开，我就不想在HTML页面中执行任何操作，直到用户在对话框中选择任何选项。我的意思是类似于alert box的功能，直到我们在alert box中说Ok，控件才转到HTML页面。我也需要，我的代码如下

Css

HTML:

---

您将只需要一个覆盖来完成这一点。试着这样做：

Html更改：

<div id="confirmOverlay"></div>
<div id="confirmBox">
     <div class="message"></div> <span class="button yes">Mail</span>
     <span class="button sms">SMS</span>
     <span class="button no">Cancle</span>
</div>

脚本更改：

function doConfirm(msg, yesFn, noFn, smsFn) {
    var confirmBox = $("#confirmBox");
    $("#confirmOverlay").height( $(window).height() );
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no,.sms").unbind().click(function () {
        confirmBox.hide();
        $("#confirmOverlay").hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.find(".sms").click(smsFn);
    confirmBox.show();
}

覆盖在弹出窗口下方的Z索引为1，并且覆盖屏幕的事实将阻止人们访问下面的内容。我在JSFIDLE中提供了填充内容来说明这一点

一旦不再需要对话框和覆盖；$'confirmOverlay.hide或$'confirmOverlay.fadeout 200将使其运行再见：

---

我希望这有帮助！如果您有问题，请告诉我。

您可以使用插件（如）或制作自己类型的弹出窗口来完成此操作。其基本思想是在主体中创建一个div，该div覆盖所有页面，不允许用户单击或执行任何其他操作，并在该div中创建弹出窗口。您将无法完全模拟本机警报/确认弹出窗口，它仅适用于UI prupouses，有一些知识的人仍然可以使用Chrome开发工具之类的工具来使用该页面。看起来不错，但在警报框中说“取消”之后。弹出窗口将隐藏，并且事件不会在HTMLY中发生。您还必须在取消功能中隐藏覆盖。一旦不再需要对话框和覆盖；$'confirmOverlay.hide或$'confirmOverlay.fadeout 200将使其运行再见：我为您在jQ中添加了hide方法。我正在列表视图中执行单击事件。首先，ONCLICK正在按我的需要工作。但当我说取消并选择另一个列表元素时，它不起作用。我想你能理解我的情况，我需要看一个例子。碰巧，您能准确地使用JSFIDLE设置吗？

<div id="confirmBox">
                  <div class="message"></div>
                  <span class="button yes">Mail</span>
                  <span class="button sms">SMS</span>
                  <span class="button no">Cancle</span>
              </div>

<div id="confirmOverlay"></div>
<div id="confirmBox">
     <div class="message"></div> <span class="button yes">Mail</span>
     <span class="button sms">SMS</span>
     <span class="button no">Cancle</span>
</div>

#confirmOverlay {
    position:fixed;
    background: rgba(0,0,0,.5);
    z-index: 9998;
    width:100%;
    top:0px;
    left:0px;
}

function doConfirm(msg, yesFn, noFn, smsFn) {
    var confirmBox = $("#confirmBox");
    $("#confirmOverlay").height( $(window).height() );
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no,.sms").unbind().click(function () {
        confirmBox.hide();
        $("#confirmOverlay").hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.find(".sms").click(smsFn);
    confirmBox.show();
}