How to create a simple popup using jQuery Colorbox plugin in wordpress

This needs to have a wordress plugin jQuery Colorbox.
Steps:

1. Add your html content in your page.
2. Add your JavaScript in the genesis themes setting if you’re using genesis framework.
3. Make sure to add cboxElement class in your button.
4. Wrap your target in a division with a style of display none.

HTML

<div >
    <a href = "#target" class = "button cboxElement" >Button</a>
</div>

<div style = "display:none;" >
    <div id = "target" >
        <h1>Sample Content for pop up</h1>
    </div><!-- end book_test_content -->
<div>

JAVASCRIPT

jQuery(document).ready(function($){
     jQuery(".button").colorbox({inline:true, width:"500px",opacity:".4",top:"10%",left:"30%"});
});

For further explanation Click here