Home > jquery > jquery colorbox as simple dialog

jquery colorbox as simple dialog

I’ve been working with opencart for a while now, and like the choice of jquery libraries that have been chosen for the project.  Recently I was developing a custom extension for opencart that required a simple dialog to appear before deleting a record.  Opencart is using the excellent colorbox jquery plugin for lightboxes and I wanted to see if I could leverage the plugin for a simple jquery dialog.

I ended up using the following code:

<a onclick="delete_entry_dialog(<?php echo $entry['id'] ?>)">Remove</a>

<div style="display:none">
 <div id="delete_entry_dialog">
 <p>
    Are you sure you want to delete this entry?
 </p>
 <a id="delete_dialog_continue">Continue</a> or <a onclick="$.colorbox.close()">Cancel</a>
 </div>
</div>

<script type="text/javascript">
function delete_entry_dialog(id) {    
    $.colorbox({inline:true, href:'#delete_entry_dialog'});
    $('#delete_dialog_continue').bind('click', function() {
       delete_entry(id); 
       $.colorbox.close();
    });
}
</script>
Advertisements
Categories: jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: