js smartPhoto和kendoDialog协作的问题

Question

我有一些图像的kendoDialog（其初始化为smartPhoto）。

我希望，当我单击照片时，应该将其放大并隐藏对话框。当我关闭照片时，应该显示对话框窗口。 当我单击照片时，它会放大，但kendoDialog不会隐藏

我尝试了使用z-index进行differend的事情，但是没有用。

然后我在js脚本中添加了一些内容：

属性：

    ReadingPhotosShown: false,(defines if photo dialog window is opened)
    ShownPhotoId: null,(photo dialog id)

绑定一些事件

        $('.readingPhoto').on('click', function () {
            if (self.ReadingPhotosShown) {
                self.HidePhotos();
            }
        });

        $('.smartphoto-dismiss').on('click', function () {
            console.log(self.ReadingPhotosShown + ' ' + self.ShownPhotoId);
            if (self.ReadingPhotosShown) {
                self.ShowPhotos(self.ShownPhotoId);
            }
        });

功能：

    ShowComments: function (id) {
        $("#commentsDialog" + id).data("kendoDialog").open();
    },
    ShowPhotos: function (id) {
        console.log(this.ReadingPhotosShown + ' ' + this.ShownPhotoId);
        this.ReadingPhotosShown = true;
        this.ShownPhotoId = id;
        $("#photosDialog" + id).data("kendoDialog").open();
    },
    HideCommentBlocks: function () {
        $("div[id*='commentsDialog']").data("kendoDialog").close();
    },
    HidePhotos: function () {
        $("div[id*='photosDialog']").data("kendoDialog").close();
    },

以下是dom中的一些照片元素

表示该结果 我懂了 无论对话框窗口不再显示，但是照片也是不可见的，当我关闭它时，对话框也不会打开。

您有解决该问题的想法吗？如果您愿意，请让我知道，任何帮助将不胜感激。