How to get a div popup by clicking submit button using fancy box / light box?

Question

my mark up

<div class="popup bg-white"><!--pop up box begins-->
            <a href="" class="close-btn fr center_text">
                <b class="small-font">X</b>
                <span>CLOSE</span>
            </a>
            <div class="popup-title medium_18 font-bold">Please edit your details below:</div>
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="Miss Rachael Short" size="49" />
            </div>  
            <div class="clearfix">
                <input type="text" class="input_box" value="" name="" placeholder="Industrial Way" size="49" />
            </div>  
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="Bath" size="49" />
            </div>
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="Somerset" size="49" />
            </div>  
            <div class="clearfix">  
                <input type="text" class="input_box" value="" name="" placeholder="BA2 8SF" size="49" />
            </div>
            <button class="btn btn-common fr btn-big auto_width" value="submit" type="submit" name="submit">EDIT</button>
        </div><!--pop up box ends-->

Button <button class="btn btn-common fl btn-myacc auto_width" value="submit" type="submit" name="submit">EDIT</button>

[UPDATE] css .popup { visiblity: hidden }

I need to pop up that div popup when clicking the EDIT button.

How can I rite the JS code for that? My site has fancybox script in the header.

Answer 1

Place your button outside popup div, give a unique ID to popup div and a class to your button and setup your fancybox code accordingly.

Demo

HTML

<div id="popupID" class="popup bg-white"><!--pop up box begins-->
        <!-- rest of the html -->    
</div><!--pop up box ends-->

<button class="fancybox btn btn-common fr btn-big auto_width" value="submit" type="submit" name="submit">EDIT</button>

jQuery

$(".fancybox").fancybox({
    'href' : '#popupID'
});