Question

我有一个由 $ 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");
}

Answer 1

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

Jquery的：

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

HTML：

<div id="dialog">

</div>

Working Fiddle

Answer 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>

Answer 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">

用jquery打开对话框

3 个答案: