模态对话框确认框文本消失

Question

我想知道是否有人可以帮助我。

我已经整理了this画廊页面。

使用每个图像下方的图标，用户可以删除他们想要的任何图像。我没有立即删除图像，而是尝试实现模态确认对话框，因此用户可以选择取消删除。

我可以让 onlick 事件工作，但询问用户是否要删除图像的文本在单击时从对话框中消失。

我确实遇到了页面加载时出现在页面顶部的对话框文本的问题。为了克服这个问题，我使用了以下方法：

我已尝试添加以下内容来防止这种情况：

.hide{   display: none !important;   }  

<div id="dialog-confirm" class="hide" title="Delete This Image?"> 

所以我知道问题很可能是由 this 引起的，但我不确定如何克服这两个问题。

我只是想知道是否有人可以看看这个并让我知道我哪里出错了。

非常感谢和问候

Answer 1

你没有提到你的代码，但我认为问题是这样的， 您的班级“.hide”正在正确申请，其中包含“display:none”。

但是 您在早期代码中为您的“对话框确认”框定义了“display:block”属性“inline”。

和 定义为“inline”的 css 属性始终具有比“class”中定义的属性高的优先级。

所以display:none 被“display:block”覆盖。

尝试通过“.addClass()/.removeClass()”或“inline”在这两个位置提供属性 它可能会帮助你！因为它在同样的情况下对我有用

我也是这个领域的新手，所以如果我错了，请其他人纠正我！

Answer 2

您可以在对话框调用中传递选项autoOpen: false 来隐藏它，直到它被调用；

$( "#dialog-confirm" ).dialog({
    autoOpen: false
});

有了这个选项，对话框应该在被调用之前隐藏起来。

此外，您已将 .hide 类放在 <style>..</style> 标记之外，并显示在您的页面顶部。

Answer 3

请删除页面上的以下样式定义。然后它将起作用：

.hide{   display: none !important;   } 

您需要使用选项autoOpen: false 定义对话框，并且需要在单击删除按钮时使用打开命令调用（您使用.live 代码）。请修改代码如下：

  $( "#dialog-confirm" ).dialog({
                resizable: false,
                modal: true,
                autoOpen: false
                buttons: {
                    "Delete image": function() {
                    var img = $(this).closest(".galleria-image").find("img"); 
                            // send the AJAX request
                    $.ajax({
                    url : 'delete.php',
                    type : 'post',
                    data : { image : img.attr('src'),  userid: "VALUE", locationid: "VALUE"},
                    success : function(){
                    img.parent().fadeOut('slow');
                    }
                    });
                    },
                    Cancel: function() {
                        $( this ).dialog( "close" );
                    }
                }
            }); 

    $(".btn-delete").live("click", function(){      
        $( "#dialog-confirm" ).dialog( "open" );
    return false;
    });