Question

我正在尝试在模态对话框中显示图像，但图像不显示。有人可以对此有任何想法。这是我完整的html布局。注意：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

我重新格式化了您的代码，但很明显您没有以正常方式编码。您使用的是Web开发应用程序（如Frontpage，Expression Web，Sharepoint等）吗？

如果您是通过PHP注入HTML，那么您应该提到为什么这样做。此外，您应该尽量避免不必要的字符串连接。通过简单地连接所有各种字符串位，并缩进一点，我将您的代码转换为可读的东西。这让我找到了：
- <p>没有关闭</p>
- 关闭表格元素（</tr></table>）但代码中没有其他表格元素
- 两个独立的javascript域 - 两个jQuery document.ready函数

请告知我们您的开发环境。如果可以的话，我强烈建议您使用Notepad ++并手动编写所有内容 - 您将以最大的方式学习（并且它确实没那么困难）。当然，除非你有充分的理由使用其他方法 - 这就是我要问的原因。

另外，我建议您访问jQueryUI网站并直接尝试their dialog examples。只需剪切/粘贴到Notepad ++中即可全部试用。然后在SO中搜索其他对话框示例并尝试它们。

为什么选择Notepad ++？因为它具有良好的语法突出显示和（最重要的）集成的FTP组件。这意味着当您保存正在处理的脚本文件时，它会立即上传到您的Web服务器，为您提供几乎即时的实时测试。太棒了。

您可能还想查看phpacademy.org上的优秀编码资源。绝对是网上最好的。

祝你的项目好运。

最后，这是你的代码从php字符串中取出时的实际外观，并且脚本部分被组合，样式部分被格式化。注意多余的表格标签以及孤立的段落标记。

<!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 个答案: