弹出模态对话框答案

【问题标题】：Pop up Modal Dialog Box弹出模态对话框
【发布时间】：2023-08-27 07:47:01
【问题描述】：

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

我已按照提供的指导进行操作，并按照说明从 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”事件上起作用。我已经多次阅读说明，但我不确定我哪里出错了。

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

非常感谢和问候

【问题讨论】：

您的按钮代码包含不匹配的引号并且未正确关闭。 <button value="Upload" onclick="$('#divdeps').dialog('open');"></button>。这应该可行，但是如答案中所述，有不同的方法可以实现。
@Virendra - 我希望你不介意我将你的评论添加到我的答案中 +1 到你的旧答案中，谢谢 :)

标签： javascript jquery html jquery-dialog

【解决方案1】：

我会用 jQuery 的 click 函数而不是那个 dom 级别 0 处理程序来做到这一点：

$("#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>

【讨论】：

按钮不在<div>内
@Wex - 我知道 - OP 的缩进让我失望了 - 它已修复
仍然损坏，引号不匹配。
@Virendra - 谢谢。我正在搜索和搜索不匹配的引号，但找不到。现在已经修好了。

【解决方案2】：

不要使用您注释掉的$("#divdeps").dialog('open');，试试：

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

【讨论】：

如果它是一个不在表单中的按钮，那么e.preventDefault()是绝对必要的吗？
所有，非常感谢您花时间帮助我解决这个问题。我已经选择了@Virendra 提供的解决方案。再次感谢和亲切的问候

【解决方案3】：

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

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 标签

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

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

【讨论】：