弹出模态对话框

时间:2011-12-31 18:15:13

标签: javascript jquery html jquery-dialog

使用this帖子我已经能够实现一个加载表单后出现的对话框。但是,我想更改此设置,以便用户单击按钮以显示对话框。

我已按照提供的指导,按照指示从Javascript函数中删除了这一行$("#divdeps").dialog('open');,并将其添加到我的按钮的'onclick'事件中,即

<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>

所以我的代码现在是:

<div id="divdeps" style="display: none">This is my div</div>
<button type="button" value="Upload" onclick="$('#divdeps').dialog('open');">Upload</button>
<script> 
$(document).ready(function(){
  $("#divdeps").dialog({
    autoOpen: false,
    show: 'slide',
    resizable: false,
    position: 'center',
    stack: true,
    height: 'auto',
    width: 'auto',
    modal: true
  });

 // $("#divdeps").dialog('open');
});

</script>

但是,我不能让这个按钮上的'onclick'事件。我现在已经完成了很多次的指示,而且我不确定我哪里出错了。

我只是想知道是否有人可以看看这个请让我知道我做错了什么。

非常感谢和问候

3 个答案:

答案 0 :(得分:2)

我会使用jQuery的click函数而不是dom level 0 handler:

$("#divdeps + button").click(function() { $("#divdeps").dialog('open'); });

当然,您可以将此按钮设为ID并执行

$("#buttonID").click(function() { $("#divdeps").dialog('open'); });

这些代码段中的任何一个都会放在document.ready处理程序中。


根据Virendra的评论,您的原始按钮标记错误 - 您错过了结束标记,并且引号不匹配:

<button value="Upload" onclick="$("#divdeps").dialog('open');"</button> 

应该是

<button value="Upload" onclick="$('#divdeps').dialog('open');"> </button> 

答案 1 :(得分:1)

而不是您注释掉的$("#divdeps").dialog('open');,请尝试:

$("button#give_it_some_id").click(function(e) {
    e.preventDefault();
    $("#divdeps").dialog('open');
})

答案 2 :(得分:0)

使用此代码在我的应用程序中工作。

PopUpWindow = function (titles, message, redirectURL) {
        document.getElementById('window').innerHTML = message;
        $("#window").dialog({
            resizable: true,
            height: 180,
            title: titles,
            width: 500,
            modal: false,
            open: function () {
                $('.ui-widget-overlay').show();
                $('.ui-dialog-titlebar-close.ui-corner-all').hide();
            },
            buttons: {
                "OK": function () {
                    $(this).dialog("close");
                    if (redirectURL) {
                        window.location = redirectURL;
                    }
                }
            }
        });
    };

div tag

  <div id="window" style="display: none;width:190px"> 

如果您有任何问题,请告诉我。