Question

我想调用一个jquery onclick一个超链接。但现在每次页面加载时都会出现对话框。我使用了这个example中的jquery示例。

$(function() {
        $( "#dialog-confirm" ).dialog({
            resizable: false,
            width:500,
            height:140,
            modal: true,
            buttons: {
                "Confirm": function() {
                    $( this ).dialog( "close" );
                    autoGeneration();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

和HTML：

<div id="dialog-confirm" title="Overwrite?">    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Will be overwrite. continue?</p> </div>

<a href="#" id="dialog-confirm" class="bigButton">AUTO GENERATION</a>

我想点击下面的链接打电话，避免每次上传页面时调用对话框。

感谢大家的回答。

Answer 1

将对话框的autoOpten选项设置为false：

$(function() {
    $("#dialog-confirm").dialog({
        autoOpen: false
         //other options
    });
});

更改链接的ID，使其与对话框div：

的ID不同

<a href="#" id="openDialog" class="bigButton">AUTO GENERATION</a>

然后只需在对话框中调用open：

$("#openDialog").click(function(e){
    e.preventDefault();
    $("#dialog-confirm").dialog("open");
});

Answer 2

$(function() {
        $( "#dialog-box" ).dialog({
            autoOpen: false,
            resizable: false,
            width:500,
            height:140,
            modal: true,
            buttons: {
                "Confirm": function() {
                    $( this ).dialog( "close" );
                    autoGeneration();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

    $( "#dialog-confirm" ).click(function() {
        $( "#dialog-box" ).dialog( "open" );
        return false;
    });

    });

您需要不同的ID用于“链接”和“对话框”，因此更改对话框 - 确认到对话框

<div id="dialog-box" title="Overwrite?">    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Will be overwrite. continue?</p> </div>

<a href="#" id="dialog-confirm" class="bigButton">AUTO GENERATION</a>

Answer 3

首先将对话框的autoOpen属性设置为false，以阻止它在页面加载时打开。

$(function() {
    $( "#dialog-confirm" ).dialog({
        autoOpen: false,
        resizable: false,
        width:500,
        height:140,
        modal: true,
        buttons: {
            "Confirm": function() {
                $( this ).dialog( "close" );
                autoGeneration();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
});

然后在链接的点击处理程序中打开它：

$("#dialog-confirm").click(function(e) {
    e.preventDefault;
    $("#dialog-confirm").dialog('open');
});

Answer 4

你应该做

    var dialog = $( "#dialog-confirm" ).dialog({
        autoOpen: false,
        resizable: false,
        width:500,
        height:140,
        modal: true,
        buttons: {
            "Confirm": function() {
                $( this ).dialog( "close" );
                autoGeneration();
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });
  });

和

$('a.bigButton').click(function(e){
    e.preventDefault();
    dialog.dialog("open");
});

在页面加载时调用jquery

4 个答案: