0

我正在尝试在模态对话框中显示图像，但图像未显示。有人可以对此有任何想法吗？这是我完整的 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>
    ";
4

1 回答 1

0

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

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

请告知我们您的开发环境。如果可以的话，我强烈建议您使用 Notepad++ 并手动编写所有代码——您将通过这种方式学到最多的东西（而且真的不再困难）。当然，除非你有充分的理由使用另一种方法——这就是我问的原因。

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

为什么记事本++？因为它有很好的语法高亮和（最好的）一个集成的 FTP 组件。这意味着当您保存正在处理的脚本文件时，它会立即上传到您的 Web 服务器，为您提供几乎即时的实时测试。这是梦幻般的。

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

祝你的项目好运。

最后，这是您的代码从 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>
于 2012-11-22T19:29:17.867 回答