Question

对于我的项目，我需要在按下按钮时弹出图像。我正在尝试使用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" />"


 })
            })

但这不会奏效。有人可以帮忙吗？

Answer 1

更新了我的帖子，这应该可行。

<!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>

simpleDialog插件无法正常工作

1 个答案: