用jquery打开对话框

我有一个对话框引用$ imageDialog我试图用$imageDialog.dialog("open")打开它，但它不起作用。用jquery打开对话框

问题是，通过调试，我看到$imageDialog.dialog("open")行执行，但然后打开$ imageDialog函数不会执行。它没有显示任何错误，我检查了$ 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"); 
}

来源

2017-03-03 Gatocan

尝试设置它的高度，你宽度 – AthMav

做也不能工作。 – Gatocan

要打开JQuery用户界面对话框只需使用：

的Jquery：

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

HTML：

<div id="dialog"> 

</div>

Working Fiddle

来源

2017-03-03 11:56:23

我试图做到这一点，但它没有工作 – Gatocan

检查jsfiddle链接 –

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

来源

2017-03-03 11:59:27

有三件事，你需要在你的代码来解决

您已经添加HTML模式与ID校准图像对话框，而是你使用＃图像对话框在您的脚本。
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">

来源

2017-03-03 19:50:03

我编辑了我的问题，解决了第3点，我错过了单引号并添加了第2点的声明（我在我的代码，但忘了复制它在这里）。关于第一点，我不太明白你的意思（我很新手），¿你能提供关于它的som文档，或者类似的东西吗？感谢您的帮助 – Gatocan

您定义了一个id为“calibration-image-dialog”的对话框html（div标签），但是当您在javascript代码中初始化对话框时，您使用的是id＃image-dialog而不是＃calibration-image-对话框这是我试图解释的第一点。 –

好吧，我解决了这个问题，但问题仍然是不固定的 – Gatocan

用jquery打开对话框

回答

相关问题