对于我的项目,我需要在按下按钮时弹出一个图像。
我正在尝试使用SimpleDialog插件,您可以在here上看到它。
我正在用我的HTML
<p>This shows standard, default popup only mode.</p>
<script type="text/javascript">
$(document).delegate('#popupbut', 'click', function() {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Some Stuff',
headerClose: true,
blankContent :
"<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
"<a rel='close' data-role='button' href='#'>Close</a>"
})
});
</script>
<a href="#" id="popupbut" data-role="button">Open Dialog</a>
我已经正确包含了JS和CSS。但是由于某种原因,它将无法正常工作。
有人有主意吗?还是SimpleDialog插件的其他替代方案?
亲切的问候
------编辑-------
好的,我可以使用上面的示例。
但是现在我只想显示一个图像。因此,我在脚本中执行了此操作。
$(document).delegate('#opendialog', 'click', function() {
// NOTE: The selector can be whatever you like, so long as it is an HTML element.
// If you prefer, it can be a member of the current page, or an anonymous div
// like shown.
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Some Stuff',
headerClose: true,
blankContent :
"<img src="images/schema.jpg" alt="schema" width="100" height="100" />"
})
})
但这行不通。有人可以帮忙吗?
最佳答案
更新了我的帖子,这应该可行。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).delegate('#opendialog', 'click', function() {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Some Stuff',
headerClose: true,
dialogAllow: true,
dialogForce: true,
blankContent :
"<img src=\"images/schema.jpg\" alt=\"schema\" width=\"100\" height=\"100\" />"+
"<a rel='close' data-role='button' href='#'>Close</a>"
})
})
</script>
<a href="#" id="opendialog" data-role="button">Open Dialog</a>
</body>
</html>