Below steps describe how to set pop-up with any link or button.
- Below example code is pop-up basic structure code just copy code and add it at the end of page.
<!-- ************************************************************ * Popup block ************************************************************ --> <!-- form : "mfp-hide" Add this class before using --> <div id="popup-unique-id" class="white-popup-block mfp-hide" data-rgen-sm="w-reset" data-rgen-md="w-reset"> <div class="pop-wrp"> <div class="pop-header" data-rgen-sm="pd-20"> ... Header part </div> <div class="pop-body" data-rgen-sm="pd-20"> ... Body part to insert content </div> </div> </div><!-- /#popup-content --> <!-- ************** END : Popup form block ************** -->
- Apply unique ID on pop-up block. Above code using id=”popup-unique-id”.
- Now copy below button link example where pop-up set on button.
<a href="#popup-unique-id" class="btn btn-default set-popup">Pop-up trigger button</a>
- Apply pop-up id as href value href=”#popup-unique-id”
- Apply CSS class set-popup, This class is important to set trigger event on button to open pop-up.