模态确认自定义对话框

Question

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

我已经把一个脚本，允许用户查看自己上传的图片在画廊的格式如图所示这里 。

现在，使用此处的jQuery演示，我正在尝试实现一个自定义对话框，以在用户选择要删除的图像时显示。 我已经按照下面的摘录所示编写了错误消息：

Galleria.ready(function() {
    this.$('thumblink').click();

    $(".galleria-image").append("<span class='btn-delete'></span>");  
    $(".btn-delete").live("click", function() {
        var img = $(this).closest(".galleria-image").find("img");      
        alert('Deleting image... ' + $(img).attr("src"));     
        return false; 
    }); 
});

我遇到的问题是我找不到在对话框周围创建div所需的方法。 我是Java的新手，所以也许这是一个非常基本的错误，但是我只是想知道是否有人可以看看这个，并让我知道我哪里出了问题？

非常感谢和问候

Answer 1

你可以这样做：

$('<div>').html('Deleting image... ' + $(img).attr("src")).dialog({autoOpen:true});

-

我认为这为您工作：

Galleria.ready(function() {
    this.$('thumblink').click();

    $(".galleria-image").append("<span class='btn-delete'></span>");  
    $(".btn-delete").live("click", function() {
        var img = $(this).closest(".galleria-image").find("img");      

// Dialog
var dialog=$('<div>').addClass('cDialog').html('Deleting image... ' + $(img).attr("src")).appendTo('#galleria').hide().fadeIn();

// On Success Delete You Can Do
// dialog.text('Deleted').delay(1000).remove();
// or

// dialog.remove();

        return false; 
    }); 
});

CSS：

#galleria{
overflow:hidden;
position:relative;
}

.cDialog{
width:100%;
position:absolute;
top:0;
right:0;
padding:13px;
background-color:#F2F2F2;
text-align:center;
}

Answer 2

想要在图片周围添加div？

您可以轻松地将div包裹在图像周围。

  <div id="inner">Hello/>

尝试使用以下代码：

$('#inner').wrap('<div class="new" />');

输出如下：

<div class="new">
    <div id="inner">Hello</div>
  </div>

Answer 3

首先，您必须正确设置图像删除链接；

喜欢：

<a title="delete img.jpg" href="delete.php?img={$id}"><span class="btn-delete"></span></a>

然后：

Galleria.ready(function() {
    this.$('thumblink').click();

    $(".galleria-image").append("<span class='btn-delete'></span>");  
    $(".btn-delete").parent().live("click", function() {
        var link = this.href;  // Get Image delete link    

        var dialog = $("<div>").text("Are you want to " + this.title + " ?");
        dialog.dialog({
            resizable: false,
            height:140,
            modal: true,
            buttons: {
                "Delete all items": function() {
                    var result = $.get(link + "&ajax=1"); // you must echo "YES" with php if success of "NO" if false
                    if(result == "YES"){
                       // Show 
                       // alert('Deleted');
                    } else {
                        // Fail
                        // Try Again

                    }
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });

        return false; 
    }); 
});