0

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

我已经编写了一个脚本，允许用户以画廊格式查看他们上传的图像，如下所示。

使用此处的 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对话框所必需的周围环境。我对 Javascript 比较陌生，所以也许这是一个非常基本的错误，但我只是想知道是否有人可以看看这个，让我知道我哪里出错了？

非常感谢和问候

4

3 回答 3

0

想要图像周围的 div 吗？

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

  <div id="inner">Hello/>

尝试使用以下代码：

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

输出如下：

<div class="new">
    <div id="inner">Hello</div>
  </div>
于 2012-05-07T13:55:35.317 回答
0

你可以这样做：

$('<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;
}
于 2012-05-07T13:51:26.137 回答
0

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

喜欢：

<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; 
    }); 
});
于 2012-05-07T15:00:48.180 回答