用 jquery 打开对话框答案

【问题标题】：Open dialog with jquery用 jquery 打开对话框
【发布时间】：2017-03-10 00:10:27
【问题描述】：

我有一个 $imageDialog 引用的对话框，我正在尝试使用 $imageDialog.dialog("open") 打开它，但它不起作用。

问题是，通过调试，我看到$imageDialog.dialog("open") 行正在执行，但是$imageDialog 中的open 函数没有执行。它没有显示任何错误，我检查了 $imageDialog 在执行$imageDialog.dialog("open") 时是否设置了参考。

这是 html 对话框：

<div class="dialog" id="image-dialog"></div>

这里是javascript代码：

var selectedImage;
var $imageDialog = $("#image-dialog");

$imageDialog.dialog({
    autoOpen: false,
    buttons: [
        {
            text: "Cerrar",
            icons: {
                primary: "ui-icon-close"
            },
            click: function() {
                $(this).dialog("close");
            }
        }
    ],
    maxHeight: 580,
    modal: true,
    position: { my: "top", at: "top+160" },
    resizable: false,
    title: "Vista de imagen",
    width: 1000,
    close: function() {
        $imageDialog.empty();
    },
    open: function() {
        content += "         <img alt='previsualizacion'" + "src='" + imageSrc + "'>";

        $imageDialog.append(content);
    }
});

function showImage(img) {
    selectedImage = img.src;
    console.log($imageDialog);
    $imageDialog.dialog("open");
}

【问题讨论】：

尝试像设置宽度一样设置它的高度
也没用。

标签： javascript jquery html jquery-ui-dialog

【解决方案1】：

要打开 JQuery UI 对话框，只需使用：

jquery：

$(document).ready(function(){
    $('#dialog').dialog();
});

HTML：

<div id="dialog">

</div>

Working Fiddle

【讨论】：

检查 jsfiddle 链接

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <title></title>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
    <script type="text/javascript">

$("#dialog").dialog({
    autoOpen: false,
    buttons: [
        {
            text: "Cerrar",
            icons: {
                primary: "ui-icon-close"
            },
            click: function() {
                $(this).dialog("close");
            }
        }
    ],
    maxHeight: 580,
    modal: true,
    position: { my: "top", at: "top+160" },
    resizable: false,
    title: "Vista de imagen",
    width: 1000,
    close: function() {
        $imageDialog.empty();
    },
    open: function() {
        content += "         <img alt='previsualizacion" + "src='" + imageSrc + "'>";

        $imageDialog.append(content);
    }
});

function showImage(img) {
    selectedImage = img.src;
    console.log($imageDialog);
    $imageDialog.dialog("open");
}
</script>
</head>
<body>
    <div class="dialog" id="dialog">Dialog</div>
</body>
</html>

【讨论】：

【解决方案3】：

您需要在代码中修复三件事

您已经添加了带有 id 校准图像对话框的模态 html，但您在脚本中使用了 #image-dialog。
imageSrc 未定义
在模式打开事件回调中，您缺少单引号。

content += "<img alt='previsualizacion" + "src='" + imageSrc + "'>";

应该是

content += "<img alt='previsualizacion'" + "src='" + imageSrc + "'>";

这是工作演示。

var $imageDialog, imageSrc;
$(function() {

  $imageDialog = $("#image-dialog");
  $imageDialog.dialog({
    autoOpen: false,
    buttons: [{
      text: "Cerrar",
      icons: {
        primary: "ui-icon-close"
      },
      click: function() {
        $(this).dialog("close");
      }
    }],
    maxHeight: 580,
    modal: true,
    position: {
      my: "top",
      at: "top+160"
    },
    resizable: false,
    title: "Vista de imagen",
    width: 500,
    close: function() {
      $imageDialog.empty();
    },
    open: function() {
      var content = "         <img alt='previsualizacion'" + "src='" + imageSrc + "'>";

      $imageDialog.html(content);

    }

  });
});

function showImage(img) {
  imageSrc = img.src;
  $imageDialog.dialog("open");
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="dialog" id="image-dialog"></div>

<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/100000/velka/autumn-by-the-lake.jpg#.WLnFxbbRDek.link" width="100" height="100">

<img onclick="showImage(this)" alt ="image" src="http://www.publicdomainpictures.net/pictures/40000/nahled/lion-head-portrait.jpg" width="100" height="100">

【讨论】：

我已经编辑了我的问题，解决了我错过单引号的第 3 点并添加了第 2 点的声明（我的代码中有声明，但忘记在此处复制它）。关于第 1 点，我真的不明白你的意思（我是新手），¿你能提供一些关于它的文档，或类似的东西吗？感谢您的帮助
您使用 id 为“calibration-image-dialog”定义对话框 html（div 标签），但是当您在 javascript 代码中初始化对话框时，您使用的是 id #image-dialog 而不是 #calibration -image-dialog 这就是我在第 1 点中试图解释的内容。
现在有什么未修复的？