javascript - 我们可以创建一个带有自定义 div 和消息的 Javascript 确认框吗

Question

我需要一个带有定制设计和动态消息的 javascript确认框。

我的问题是：我需要一个函数来调用该调用我如何接收该弹出窗口的结果；（比如是或否）。那可能吗？

代码

if (confirm('Are you sure?')){
    //Do the process
}
else{ 
    //Show Error 
}  

我想用我的自定义样式覆盖确认

Answer 1

如何制作一个允许用户响应的隐藏 div

    <div id="confirm" class="noshow">
      <div  id="messageContent" class="message"></div>
      <div id="okButton" onClick="doConfirm(true)" class="button"></div>
      <div id="cancelButton" onClick="doConfirm(false)" class="button"></div>
    </div>

现在您可以使用getElementById('messageContent')类似的方式轻松设置消息，您现在可以使用和功能处理ok和cancel操作doConfirm(true)doConfirm(false)

以一种简单的方式，您的 javascript 将类似于

doConfirm(flag){
  return flag;
 }

并有类似的CSS

.noshow{display:none;}

现在您可以在运行时从 javascript 构建 html 并附加事件处理程序，但这是我能想到的最简单的方法。

Answer 2

对我来说，这个解决方案要好得多：

html:

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

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();
    });
}

利用：

    dialog('Are you sure you want to do this?',
        function() {
            //If yes do something
            console.log("yes");
        },
        function() {
            //If no do something else
            console.log("no");
        }
    );

如果没有，请不要忘记添加 jquery。

基于alnorth29对这个问题的回答

Answer 3

您可以使用回调来执行此操作

确认处理程序，将添加到您的全局 javascript 文件中

function ConfirmInDiv(message, okcallback, cancelcallback) {
  $('#confirmation-holder').show();
  $("#confirmation_message").text(message);
  $('#Confirmation_Ok').unbind('click');
  $('#Confirmation_Ok').click(okcallback);
  $('#Confirmation_Cancel').unbind('click');
  $('#Confirmation_Cancel').click(cancelcallback);
}

function HideConfirmDiv() {
  $('#confirmation-holder').hide();
}

HTML，应该驻留在您的布局文件中：

<div id="confirmation-holder" style="display:none">
    <div id="confirmation_message"></div>
    <a id="Confirmation_Ok" href="#" class="button">OK</a>
    <a id="Confirmation_Cancel" href="#" class="button light-button">Cancel</a>
</div>

并且无论你想调用你的 javascript 确认：

而不是这个

function delete()
{
     if(confirm("Delete?")
     {
         console.log('deleted');
     }
     else
     {
         console.log('delete cancelled');
     }
}

做这个

function delete()
{
    function ok()
    {
         console.log('deleted');
         HideConfirmDiv();
    }
    function cancel()
    {
         console.log('delete cancelled');
         HideConfirmDiv();
    }
    ConfirmInDiv('Delete?', ok, cancel);   
}