js覆盖确认

时间:2012-10-05 13:59:08

标签: javascript

我想尝试使用模态对话框覆盖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;
  });

5 个答案:

答案 0 :(得分: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>

编辑:因为搜索引擎优化原因,将链接网址保留在href上(而不是只留下“/#”)非常重要 - 因为链接没有被触发,所以在调用新版本后你也应该返回false确认对话。

答案 1 :(得分:1)

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

虽然很丑,但是效果很好。

final OutputTag<Tuple3<String, Long, JSONObject>> lateOutputTag = new OutputTag<Tuple3<String, Long, JSONObject>>("late-data") {
        };
DataStream<Tuple3<String, Long, JSONObject>> lateData = res.getSideOutput(lateOutputTag);

答案 2 :(得分:0)

如果您需要覆盖window.alert()对话框,可以找到它here

之后我创建了自己的覆盖window.confirm()对话框,你可以在这里找到它

Overriding the window.confirm() dialog box.

这很简单就像:

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

答案 3 :(得分:0)

我知道这是一个老帖子,但我想分享我的解决方案,我知道这会改变yii的默认行为,但我用一个自定义工作方式替换了它们的功能,我会问yii gurus关于更好的方法或者如果将来这可以轻松完成。

在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;
    }
}
`

编辑:

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

在您的小部件网格中,您可以使用以下按钮的文件:

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}'
        ),  

答案 4 :(得分:-3)

尝试在onclick上添加一个返回:

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