Question

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

我已经整理了一个脚本，允许用户以图库格式查看他们上传的图片here。

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

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。我对Javascript比较陌生，所以也许这是一个非常基本的错误，但我只是想知道是否有人可以看看这个并让我知道我哪里出错了？

非常感谢和问候

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; 
    }); 
});

模态确认自定义对话框

3 个答案: