在Java的模式对话框中显示div内容

Question

I am trying to display an image inside a modal dialog but the image does not show. 我正在尝试在模式对话框中显示图像，但图像未显示。 can someone have any ideas about this. 有人对此有任何想法吗？ here is my complete html layout. 这是我完整的html布局。 note: there is jquery in the div content. 注意：div内容中有jquery。

html_content = "
    <strong>"+title+"</strong>
    <br>
    <br>
    <img src='"+single_image+"'width='300' height='211'>
    <br> "+content+"
    <br>"+str+"
    <div id='image'></div>
    <div id='dialog-modal' title='Basic modal dialog'>
    <div id='popup' style='display:none'>"+"
        <a id='popup-close' href='' class='button'>"+"Fermer"+"</a>
        <p><img id='image-placeholder' width='300px'; height='250px'  src=''>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'></script>
        <script type='text/javascript'>
            $(document).ready(function() {
                $('.popup-open').click( function(e){
                    $('#popup:visible').hide(); 
                    e.preventDefault();
                    $('#image-placeholder').attr('src', $(this).attr('href'));
                    $('#popup').fadeIn('fast');
                });
                $('#popup-close').click(function(e){
                    e.preventDefault();
                    $('#popup').fadeOut('fast');
                });
            });
        </script>
    ";

String mdialog = "
    <link rel=\"stylesheet\" href=\"http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css\" />
    <script src=\"http://code.jquery.com/jquery-1.8.2.js\"></script>
    <script src=\"/resources/demos/external/jquery.bgiframe-2.1.2.js\"></script>
    <script src=\"http://code.jquery.com/ui/1.9.1/jquery-ui.js\"></script>
    <link rel=\"stylesheet\" href=\"/resources/demos/style.css\" />
    <script> 
        $(function() {
            $( '#dialog-modal' ).dialog({height: 140, modal: true});
        });
    </script>
    <meta http-equiv=\"Content-Type\" " +"content=\"text/html; charset=utf-8\">
    <style>
        #popup{border: 1px solid gray; background-color:black; border-radius: 5px 5px 5px 5px; margin-left:auto; margin-right:auto; position:fixed; top:50px; z-index: 9999;}
    </style>
    ";

String webData = "
    <!DOCTYPE html>
    <head> 
        "+mdialog+"
    </head>
        <body>
        "+html_content+"
                </tr>
            </table>
        </div>
        </body>
    </html>
    ";

Answer 1

I reformatted your code but it is pretty evident that you are not coding in a normal fashion. 我重新格式化了您的代码，但很明显您不是以正常方式进行编码。 Are you using a web development app (like Frontpage, Expression Web, Sharepoint, etc)? 您是否正在使用Web开发应用程序（例如Frontpage，Expression Web，Sharepoint等）？

If you are injecting your HTML via PHP, then you should mention why you are doing that. 如果要通过PHP注入HTML，则应提及为什么这么做。 Also, you should try to avoid unnecessary joinings of strings. 另外，您应尝试避免不必要的字符串连接。 By simply joining all the various string bits, and indenting a bit, I turned your code into something readable. 通过简单地连接所有各种字符串位并缩进一点，我将您的代码变成了可读的代码。 This allowed me to find: 这使我能够找到：
- <p> without closing </p> - <p>不关闭</p>
- closing table elements ( </tr></table> ) but no other table elements in the code -关闭表格元素（ </tr></table> ），但代码中没有其他表格元素
- Two separate areas of javascript -JavaScript的两个独立区域
- Two jQuery document.ready functions -两个jQuery document.ready函数

Please advise us of your development environment. 请告知我们您的开发环境。 If you can, I strongly suggest using Notepad++ and coding everything by hand - you'll learn the most that way (and it's really no more difficult). 如果可以的话，我强烈建议您使用Notepad ++并手动编写所有内容-您将以这种方式学到最多的知识（这实际上并不困难）。 Unless, of course, there is a good reason you are using the other method -- which is why I ask. 当然，除非您有充分的理由使用其他方法-这就是我问的原因。

Also, I suggest going to the jQueryUI web site and trying their dialog examples directly. 另外，我建议转到jQueryUI网站并直接尝试其对话框示例。 Just cut/paste into Notepad++ and try them all. 只需将其剪切/粘贴到Notepad ++中，然后全部尝试即可。 Then search SO for other dialog examples and try them. 然后在SO中搜索其他对话框示例并尝试。

And why Notepad++? 为什么要使用记事本++？ Because it has good syntax highlighting and (best of all) an integrated FTP component. 因为它具有良好的语法突出显示和（最好的）一个集成的FTP组件。 This means that when you save the script file you are working on, it is instantly uploaded to your web server giving you almost-instant live testing. 这意味着，当您保存正在处理的脚本文件时，该文件会立即上传到Web服务器，从而使您几乎可以即时进行实时测试。 It's fantastic. 这是梦幻般的。

You might also like to check out the excellent coding resources at phpacademy.org. 您可能还想在phpacademy.org上查看出色的编码资源。 Definitely the best tuts on the web. 绝对是网络上最好的孩子。

Good luck with your project. 祝您项目顺利。

And finally, this is what your code actually looks like when taken out of the php strings, and the script sections are combined, and the style section is formatted. 最后，这是您的代码从php字符串中取出时的实际外观，并且将脚本节组合在一起，并对样式节进行了格式化。 Notice the extra table tags out of nowhere and the orphaned paragraph tag. 请注意多余的表格标签和孤立的段落标签。

<!DOCTYPE html>
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.bgiframe-2.1.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script> 
        $(document).ready(function() {
            $( '#dialog-modal' ).dialog({height: 140, modal: true});
            $('.popup-open').click( function(e){
                $('#popup:visible').hide(); 
                e.preventDefault();
                $('#image-placeholder').attr('src', $(this).attr('href'));
                $('#popup').fadeIn('fast');
            });
            $('#popup-close').click(function(e){
                e.preventDefault();
                $('#popup').fadeOut('fast');
            });
        });
    </script>
    <meta http-equiv="Content-Type" " +"content="text/html; charset=utf-8">
    <style>
        #popup{
            border: 1px solid gray; 
            background-color:black; 
            border-radius: 5px 5px 5px 5px; 
            margin-left:auto; 
            margin-right:auto; 
            position:fixed; 
            top:50px; 
            z-index: 9999;
            }
    </style>
</head>
<body>
    <strong>This is my Title</strong>
    <br>
    <br>
    <img src='http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG'width='300' height='211'>
    <br> 
        Here is some content
    <br>
        Here is a string of text.
    <div id='image'></div>
    <div id='dialog-modal' title='Basic modal dialog'>
    <div id='popup' style='display:none'>
        <a id='popup-close' href='' class='button'>Fermer</a>
        <p><img id='image-placeholder' width='300px'; height='250px'  src=''>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'></script>
        <script type='text/javascript'>
        </script>
        </tr>
            </table>
        </div>
    </body>
</html>

在Java的模式对话框中显示div内容

问题描述

1 个解决方案

解决方案1
0 2012-11-22 19:29:17

在Java的模式对话框中显示div内容

问题描述

1 个解决方案

解决方案1 0 2012-11-22 19:29:17

解决方案1
0 2012-11-22 19:29:17