5

我想尝试用模态对话框覆盖 window.confirm 函数。

    <a href="http://example.com" onClick="return confirm('you want to go?')">

    <script>
        window.confirm = function(message){
            $("#confirm-dialog").modal('show');
            $("#confirm-dialog .modal-body p").html(message);
            $("#confirmYes").on("click", function () {
                return true;
            });

        }
    </script>

当我在模式窗口中单击#confirmYes 元素时，它返回true，但通过href 链接重定向将不起作用...为什么？

有人可以告诉我如何在不更改链接的情况下做这件事吗？谢谢

UPD Yii 框架为 CGridView 小部件生成该代码，我想覆盖它。我无法更改此代码，因为它在框架中。相反，这个确认标准我想使用我的模态窗口

 $(document).on('click','#product-grid a.delete',function() {
   if(!confirm('Are you sure you want to delete this item?')) return false;
   var th=this;
   var afterDelete=function(){};
   $.fn.yiiGridView.update('product-grid', {
       type:'POST',
       url:$(this).attr('href'),
       success:function(data) {
           $.fn.yiiGridView.update('product-grid');
           afterDelete(th,true,data);
       },
       error:function(XHR) {
           return afterDelete(th,false,XHR);
       }
   });
   return false;
  });
4

5 回答 5

5

这是我们在我公司的一个 UI 转换项目中使用的一种做法。

虽然它很丑，但它工作得很好。

var clickState={};
    var justClicked=null;
  window.confirm = function(message) {
  var e = window.event || window.confirm.caller.arguments[0];
  var el = e.target || e.srcElement;  // the element's click that triggers confirm dialog
        if(justClicked && clickState[justClicked]===true){
            clickState[justClicked]=false;
            return true;
        }else{
            // your async style confirmation dialog (e.g. jQuery's dialog)
            showConfirmBox(message, function() {
                    justClicked=el;
                    clickState[el]=true;
                    $(justClicked).click();   // in the call back function , click the target again. 
            });
        }
  return false;
  };
于 2018-07-18T10:43:14.983 回答
1

Js默认确认对话框同步工作，这意味着代码将等待用户做出他的选择继续。当您以这种方式覆盖确认对话框时，会显示您新的时尚确认对话框，但方法立即结束并返回undefined。

您可以使用回调；

<a href="http://example.com" onClick="confirm('you want to go?', function(result){ 
    if(result)
      //code to redirect, like window.location(this.href);
}); return false;">

然后：

<script>
    window.confirm = function(message, cb){
        $("#confirm-dialog").modal('show');
        $("#confirm-dialog .modal-body p").html(message);
        $("#confirmYes").on("click", function (userChoice) {
            cb(userChoice); //true or false - your jquery plugin will supply this value 
        });

    }
</script>

编辑：出于 SEO 的原因，将链接 url 保留在 href 上（而不是仅仅留下“/#”）很重要——因为链接不会被触发，您还应该在调用新的确认对话框后返回 false。

于 2012-10-05T14:13:21.017 回答
0

我知道这是一篇旧帖子，但我想分享我的解决方案，我知道这会改变 yii 默认行为，但我将它们的功能替换为一个自定义工作方式相同，我会向 yii 大师询问更好的方法，或者如果在未来这可以很容易地完成。

在 framework/yii/zii/widgets/grid/CButtonColumn.php 中修改 initDefaultButtons：

/** * 初始化默认按钮（查看、更新和删除）。*/

    protected function initDefaultButtons()
    {
        if($this->viewButtonLabel===null)
            $this->viewButtonLabel=Yii::t('zii','View');
        if($this->updateButtonLabel===null)
            $this->updateButtonLabel=Yii::t('zii','Update');
        if($this->deleteButtonLabel===null)
            $this->deleteButtonLabel=Yii::t('zii','Delete');
        if($this->viewButtonImageUrl===null)
            $this->viewButtonImageUrl=$this->grid->baseScriptUrl.'/view.png';
        if($this->updateButtonImageUrl===null)
            $this->updateButtonImageUrl=$this->grid->baseScriptUrl.'/update.png';
        if($this->deleteButtonImageUrl===null)
            $this->deleteButtonImageUrl=$this->grid->baseScriptUrl.'/delete.png';
        if($this->deleteConfirmation===null)
            $this->deleteConfirmation=Yii::t('zii','Are you sure you want to delete this item?');

        foreach(array('view','update','delete') as $id)
        {
            $button=array(
                'label'=>$this->{$id.'ButtonLabel'},
                'url'=>$this->{$id.'ButtonUrl'},
                'imageUrl'=>$this->{$id.'ButtonImageUrl'},
                'options'=>$this->{$id.'ButtonOptions'},
            );
            if(isset($this->buttons[$id]))
                $this->buttons[$id]=array_merge($button,$this->buttons[$id]);
            else
                $this->buttons[$id]=$button;
        }

        if(!isset($this->buttons['delete']['click']))
        {
            if(is_string($this->deleteConfirmation))
                $confirmation="if(!confirm(".CJavaScript::encode($this->deleteConfirmation).")) return false;";
            else
                $confirmation='';

            if(Yii::app()->request->enableCsrfValidation)
            {
                $csrfTokenName = Yii::app()->request->csrfTokenName;
                $csrfToken = Yii::app()->request->csrfToken;
                $csrf = "\n\t\tdata:{ '$csrfTokenName':'$csrfToken' },";
            }
            else
                $csrf = '';

            if($this->afterDelete===null)
                $this->afterDelete='function(){}';



    $withConfirmation    = strlen($confirmation) == 0 ? 0 : 1;
    $confirmationMessage =  CJavaScript::encode($this->deleteConfirmation);

    $this->buttons['delete']['click']=<<<EOD

    `function(event) {
    event.preventDefault();

    if ($withConfirmation){
        var th=this;
        var afterDelete=$this->afterDelete;
        var deleteUrl=$(this).attr('href');
        console.log(deleteUrl); 
        $(document.createElement('div')).attr({
            title:'Atención',
            'class': 'dialog'
        }).html($confirmationMessage).dialog({
            buttons: {
                "OK": function () {
                    $(this).dialog('close');                    
                    $.fn.yiiGridView.update('{$this->grid->id}', {
                        type:'POST',
                        url:deleteUrl,$csrf
                        success:function(data) {
                            $.fn.yiiGridView.update('{$this->grid->id}');
                            afterDelete(th,true,data);
                        },
                        error:function(XHR) {
                            return afterDelete(th,false,XHR);
                        }
                    });
                    return true;
                },
                "Cancel": function () {
                    $(this).dialog('close');
                    return false;
                }
            },
            close: function () {
                $(this).remove();
            },
            draggable: false,
            modal: true,
            resizable: false,
            width: 'auto'
        }).position({
           my: "center",
           at: "center",
           of: window
        });

    }
}
EOD;
    }
}
`

编辑：

我还学会了如何在不修改核心 yii 的情况下做到这一点：

在您的小部件网格中，您有一个按钮文件，如下所示：

array
        (
            'class'=>'CButtonColumn',
            'deleteConfirmation'=>'Atencion',
            'buttons'=>array
            (
                    'update'=>array
                    (
                            'imageUrl'=>FALSE,
                            'label'=>'update',
                            'options'=>array('title'=>'update'),
                            'visible'=>'$row > 0'
                    ),
                    'delete'=>array
                    (
                            'imageUrl'=>FALSE,
                            'label'=>'delete',
                            'options'=>array('title'=>'delete'),
                            'click'=>'function(){$("#mydialog").dialog("open"); return false;}',
                    ),
            ),
            'template'=>'{update} | {delete}'
        ),
于 2014-11-30T23:18:30.690 回答
0

如果您需要覆盖 window.alert() 对话框，您可以在此处找到它

之后，我创建了自己的覆盖 window.confirm() 对话框，您可以在此处找到它

覆盖 window.confirm() 对话框。

这很简单，就像：

window.confirm = function(message, title, doYes) {
        $(document.createElement('div'))
                .attr({title: title, class: 'confirm'})
                .html(message)
                .dialog({
            buttons: {
                "Confirm": function() {
                    $(this).dialog("close");
                    if (doYes && (typeof doYes === "function")) {
                        doYes();
                    } 
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
            ,
            close: function() {
                $(this).remove();
            },
            draggable: true,
            modal: true,
            resizable: false,
            width: 'auto'
        });
    };

// New confirm
//confirm('This is a <strong>new</strong> alert!','Confirm', function(){alert('Yes')},function(){alert('No')});
于 2014-03-12T11:24:47.013 回答
-3

尝试向 onclick 添加返回：

a href="http://example.com" onclick="return confirm("you want to go?")">
于 2012-10-05T14:02:03.673 回答