Setup pop-up with any button or link

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.

 

 

Related Articles