jQuery Simple Dialog

DEMO1

This is a Simple Dialog Demo.

HTML:

<a href="#" id="sdHc1" rel="simpleDialog1">show dialog!</a>  

<!-- content -->
<div style="display:none;" id="simpleDialog1">
  <h3>DEMO1</h3>
  <p>This is a Simple Dialog Demo.</p>
</div>
    

JavaScript:

$('#sdHc1').simpleDialog();

DEMO2

This is a Simple Dialog Demo.

HTML:

<a href="#" id="sdHc2" class="medium" rel="simpleDialog2">show dialog!</a>  

<!-- content -->
<div style="display:none;" id="simpleDialog2">
  <h3>DEMO2</h3>
  <p>This is a Simple Dialog Demo.</p>
  <a href="#" class="close">close</p>
</div>
    

JavaScript:

$('#sdHc2').simpleDialog({
  showCloseLabel: false
});
    

DEMO3

Close

HTML:

<a href="#" id="sdHc3" rel="simpleDialog3">show dialog!</a>  
<span style="display:none;" id="checkboxStatus"></span>

<!-- content -->
<div style="display:none;" id="simpleDialog3">
  <h3>DEMO3</h3>
  <form id="checkboxForm">
    #1. <input type="checkbox" class="chckbx" value="1" /><br />
    #2. <input type="checkbox" class="chckbx" value="2" /><br />
    #3. <input type="checkbox" class="chckbx" value="3" />
  </form>
  <p><a href="#" class="close">Close</a></p>
</div>
    

JavaScript:

$('#sdHc3').simpleDialog({
  showCloseLabel: false,
  open: function () {
    $('#checkboxStatus').html('');
  },
  close: function () {
    var c = [];
    $('#checkboxForm :checkbox:checked').each(function () {
      c.push($(this).val());
    });
    $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
  }
});
    

HTML:

<form action="/simpledialog/" method="POST" id="sdAf1">
  <select name="q">
    <option value="111">111</option>
    <option value="222">222</option>
    <option value="333">333</option>
    <option value="444">444</option>
    <option value="555">555</option>
  </select>
  <input type="submit" value="show dialog!" />
</form>
    

JavaScript:

$('#sdAf1').simpleDialog();

HTML:

<a href="/simpledialog/" id="sdAl1">show dialog!</a>
    

JavaScript:

$('#sdAl1').simpleDialog();

HTML:

<a href="/simpledialog/" id="sdAl2">show dialog!</a>
    

JavaScript:

$('#sdAl2').simpleDialog({
  width: 300,
  height: 300
});

HTML:

<form action="/" id="flickrForm">
  <input type="text" name="q" />
  <input type="submit" value="search" />
</form>

<div id="flickrContainer"></div>
     

JavaScript:

/**
 * To use the Flickr API you need to have an application key. 
 * @see http://www.flickr.com/services/api/
 */
$('#flickrForm').submit(function () {
  var $this = $(this);
  var container = $('#flickrContainer');

  container.html('loading...').fadeIn(400);

  var url =
    'http://api.flickr.com/services/rest/?' +
    'api_key=[Your API Key]&' +
    'format=json&' +
    'method=flickr.photos.search&' +
    'tags=' + encodeURIComponent($.trim($this.find(':text').val())) + '&' +
    'jsoncallback=?';

  $.getJSON(url, function (obj) {
    if (!obj.photos || !obj.photos.photo) return false;

    var html = '';
    $(obj.photos.photo).each(function (i, p) {

      var pic =
        'http://farm' + p.farm + '.static.flickr.com/' + 
        p.server + '/' + p.id + '_' + p.secret + '_m.jpg';
 
      var thumb =
        'http://farm' + p.farm + '.static.flickr.com/' + 
        p.server + '/' + p.id + '_' + p.secret + '_t.jpg';

      html +=
        '<a href="' + pic + '" title="flickr">' +
        ' <img src="' + thumb + '" width="100px" height="100px" title="' + p.title + '" />' +
        '</a>';
    });
    container
      .html(html)
      .find('a')
      .simpleDialog({
        title: 'flickr',
        duration: 800
      });
    });
  return false;
});