Home/ Questions/Q 7808185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T03:04:24+00:00

For my project I need to popup an image when i push a button.

  • 0

For my project I need to popup an image when i push a button.
I am trying to use the SimpleDialog plugin, which you can see over here.
I am doing this in my 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>

I have included the JS and CSS properly. But for some reason it won’t work.
Does anybody have an idea? Or an other alternative for the SimpleDialog plugin?

Kind Regards

——EDIT ——-
OK I got it to work with the example above.
But now I only want to show an image. So I do this in my script.

    $(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" />"


 })
            })

But this wont work. Anybody can help?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Updated my post, this should work.

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