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の2つの別々の領域
-2つのjQuerydocument.ready関数

開発環境を教えてください。可能であれば、Notepad ++を使用し、すべてを手作業でコーディングすることを強くお勧めします。その方法で最も多くのことを学ぶことができます（実際、これ以上難しくはありません）。もちろん、他の方法を使用している正当な理由がない限り、それが私が尋ねる理由です。

また、jQueryUI Webサイトにアクセスして、ダイアログの例を直接試すことをお勧めします。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>
于 2012-11-22T19:29:17.867 に答える