在Java的模式对话框中显示div内容 [英] Display div content in a modal dialog box in java
问题描述
我正在尝试在模式对话框中显示图像，但该图像没有显示.有人对此有任何想法吗?这是我完整的html布局.注意:div内容中包含jquery.
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. note: there is jquery in the div content.
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>
";
推荐答案
我重新格式化了您的代码，但很明显您不是以正常方式进行编码.您是否正在使用Web开发应用程序(例如Frontpage，Expression Web，Sharepoint等)?
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)?
如果要通过PHP注入HTML，则应提及为什么这样做.另外，您应尝试避免不必要的字符串连接.通过简单地连接所有各种字符串位并缩进一点，我将您的代码变成了可读的代码.这使我能够找到:
-<p>不关闭</p>
-关闭表元素(</tr></table>)，但代码中没有其他表元素
-javascript的两个独立区域
-两个jQuery document.ready函数
If you are injecting your HTML via PHP, then you should mention why you are doing that. 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>
- closing table elements (</tr></table>) but no other table elements in the code
- Two separate areas of javascript
- Two jQuery document.ready functions
请告知我们您的开发环境.如果可以的话，我强烈建议您使用Notepad ++并手动编写所有内容-您将以这种方式学到最多的知识(这实际上并不困难).当然，除非您有充分的理由使用其他方法-这就是我问的原因.
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). Unless, of course, there is a good reason you are using the other method -- which is why I ask.
此外，我建议转到jQueryUI网站并直接尝试其对话框示例.只需将其剪切/粘贴到Notepad ++中，然后全部尝试即可.然后在SO中搜索其他对话框示例并尝试.
Also, I suggest going to the jQueryUI web site and trying their dialog examples directly. Just cut/paste into Notepad++ and try them all. Then search SO for other dialog examples and try them.
为什么要使用记事本++?因为它具有良好的语法突出显示功能，并且(最好)是集成的FTP组件.这意味着，当您保存正在处理的脚本文件时，该文件会立即上传到Web服务器，从而使您几乎可以即时进行实时测试.太棒了.
And why Notepad++? Because it has good syntax highlighting and (best of all) an integrated FTP component. 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. It's fantastic.
您可能还想在phpacademy.org上查看出色的编码资源.绝对是网络上最好的孩子.
You might also like to check out the excellent coding resources at phpacademy.org. Definitely the best tuts on the web.
祝你项目顺利.
最后，这是从php字符串中取出代码后的代码的实际外观，并且将脚本部分组合在一起，并对样式部分进行了格式化.请注意多余的表格标签和孤立的段落标签.
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. 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内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
