图像和文本弹出窗口的Dojo对话框

rjzwgtxy 于 2022-12-20 发布在 Dojo

关注(0)|答案(3)|浏览(238)

我试图创建一个对话框，显示文本和图像使用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();

dojo

来源：https://stackoverflow.com/questions/42771016/dojo-dialog-for-image-and-text-pop-up

3条答案

按热度按时间

o8x7eapl1#

我不知道你哪里搞错了，一定要检查一下图像是否成功加载（在控制台中），
另一点是，您必须调用data-dojo-id标识符来显示对话框kycDetailDialog，而不是subDetailDialog。
下面的工作片段，可能会帮助你（使用现代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，这里有一把小提琴

赞(0）回复(0）举报 2022-12-20

xa9qqrwz2#

试试这个。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();

赞(0）回复(0）举报 2022-12-20

smdnsysy3#

在本例中，您还可以使用Dojo工具提示将弹出窗口与图像连接起来。
文件：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 ...'
});

赞(0）回复(0）举报 2022-12-20

我来回答

图像和文本弹出窗口的Dojo对话框

HTML：

Javascript：

3条答案

相关问题

热门标签

最新问答