在Java的模式對話框中顯示div內容

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網站並直接嘗試其對話框示例。 只需將其剪切/粘貼到Notepad ++中，然后全部嘗試即可。 然后在SO中搜索其他對話框示例並嘗試。

為什么要使用記事本++？ 因為它具有良好的語法突出顯示和（最好的）一個集成的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 個解決方案

解決方案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