弹出图像和文本的 Dojo 对话框答案

【问题标题】：Dojo dialog for Image and text pop up弹出图像和文本的 Dojo 对话框
【发布时间】：2017-08-03 21:43:09
【问题描述】：

我正在尝试使用 dojo 对话框小部件创建一个显示文本和图像的对话框，每当我通过 innerhtml 传递图像详细信息时，文本或图像都不会出现弹出窗口。

它适用于文本细节，但不显示图像细节。我在下面包含了我的代码：

HTML：

<div data-dojo-type="dijit.Dialog" title="SUB Details"
    style="width: 500px; height: 150px; display:none; 
    id="subDetailDialog"
    data-dojo-id="kycDetailDialog">
    <br>
    <table border ='0px' align='center' width='400' class='detailedInfo' id='detailedInfo' >
        <tr class='even'>
            <td style="width:40%"><strong>First Name</strong></td><td><strong>:</strong></td>
            <td id='firstNameRow' style="width:40%"></td>
        </tr>
        <tr class='odd'>
            <td><strong>Date of birth</strong></td><td><strong>:</strong></td>
            <td id='dobRow'></td>
        </tr>
        <tr class='even'>
            <td><strong>Subscriber Image</strong></td><td><strong>:</strong></td>
            <td id='imgRow'></td>
        </tr>
    </table>
</div>

Javascript：

dojo.byId("firstNameRow").innerHTML = data.firstName;
dojo.byId("dobRow").innerHTML = data.dob;
dojo.byId("imgRow").innerHTML = '<img src="/images/123456789_.jpg" border="0" width="32" height="32"/>';

subDetailDialog.show();

【问题讨论】：

标签： javascript html dojo dijit.dialog

【解决方案1】：

在这种情况下，您还可以使用 Dojo Tooltip 将弹出窗口与图像连接起来。
文档：https://dojotoolkit.org/reference-guide/1.10/dijit/Tooltip.html

<img id="image" src="myimage.jpg" height="200px" width="200px">

new Tooltip({
   connectId: ["image"],
   defaultPosition: "after",
   label: 'TEXT ...'
});

【讨论】：

【解决方案2】：

试试这个。 HTML：

<div data-dojo-type="dijit.Dialog" title="SUB Details"
    style="width: 500px; height: 150px; display:none; 
    id="subDetailDialog"
    data-dojo-id="kycDetailDialog">
    <br>
    <table border ='0px' align='center' width='400' class='detailedInfo' id='detailedInfo' >
        <tr class='even'>
            <td style="width:40%"><strong>First Name</strong></td><td><strong>:</strong></td>
            <td id='firstNameRow' style="width:40%"></td>
        </tr>
        <tr class='odd'>
            <td><strong>Date of birth</strong></td><td><strong>:</strong></td>
            <td id='dobRow'></td>
        </tr>
        <tr class='even'>
            <td><strong>Subscriber Image</strong></td><td><strong>:</strong></td>

            <!-- CHANGED -->
            <td><img src="" id='imgRow'></td>

        </tr>
    </table>
</div>

Javascript：

dojo.byId("firstNameRow").innerHTML = data.firstName;
dojo.byId("dobRow").innerHTML = data.dob;

// CHANGED
dojo.byId("imgRow").src = "/images/123456789_.jpg";
dojo.byId("imgRow").style = "border: 0; height: 32px; width: 32px;";

subDetailDialog.show();

【讨论】：

【解决方案3】：

不知道你看错哪里了，一定要检查图片是否加载成功（在控制台），

另一点是您必须调用data-dojo-id 标识符来显示对话框kycDetailDialog 而不是subDetailDialog。

在一个可以帮助你的工作 sn-p 之下（使用现代 dojo AMD）

require(["dijit/Dialog", "dojo/dom","dojo/on","dijit/form/Button","dojo/ready","dojo/parser"],
   function(Dialog,Dom,On,Button,ready,parser){
        parser.parse();
    	ready(function(){
        
            On(Dom.byId("btn"),"click",function(e){
          	kycDetailDialog.show();
            });
          
            //data you grab from ajax or other stuff ...
            var data = {
               firstName:"bRIMOs",
               dob:"21/01/1989"
            }
            Dom.byId("firstNameRow").innerHTML = data.firstName;
            Dom.byId("dobRow").innerHTML = data.dob;
            Dom.byId("imgRow").innerHTML = '<img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/flip.jpg" border="0" width="32" height="32"/>'
            kycDetailDialog.show();
        });    
    }
);

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.3/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
  <div data-dojo-type="dijit/form/Button" id="btn">Show subscriber info </div>
  <div data-dojo-type="dijit/Dialog" title="SUB Details" style="width: 500px; height: 150px; display:none;" id="subDetailDialog" data-dojo-id="kycDetailDialog"><br>
    <table border='0px' align='center' width='400' class='detailedInfo' id='detailedInfo'>
      <tr class='even'>
        <td style="width:40%"><strong>First Name</strong></td>
        <td><strong>:</strong></td>
        <td id='firstNameRow' style="width:40%"></td>
      </tr>
      <tr class='odd'>
        <td><strong>Date of birth</strong></td>
        <td><strong>:</strong></td>
        <td id='dobRow'></td>
      </tr>
      <tr class='even'>
        <td><strong>Subscriber Image</strong></td>
        <td><strong>:</strong></td>
        <td id='imgRow'></td>
      </tr>
    </table>
  </div>
</body>

如果你想测试代码，这里有一个小提琴 -> FIDDLE

【讨论】：