WordPress Tricks

PopUp Modal Confirmation with Yes, No and Redirection: For WordPress and Others

Recently one of my client asked me to show a Age Restriction Popup while clicking on a specific menu item.  

So, the requirement was

  1. Visitor will click on Specific menu item ( say for  Product menu)
  2. Instead of going to that Product page, Visitor will see a Popup Modal
  3. In that Popup Modal Visitor will see “Are You Above 18 Years Old ? “
  4. If visitor Click on “Yes”,  then visitor will redirct to a Specific page or another URL

Here is the screenshot how the final Popup was looking

PopUp Modal Confirmation Yes No and Redirection

You can ask question regarding any issue you are facing in comments section.

Or can take my personal help.

Here is the steps I used:

  1. Install “Header Footer Code Manager” plugins
  2. Under  HFCM click on  Add New

Header Footer Code Manager Add New

3.  Give that New Snippet a name ( my one is  “Header”)  and select  Location to  “Header”

Header Footer Code Manager Header Code

4. In that “Header”  Snippet put the following code

<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<style>
	 .modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    top: 30% !important;
}
	.modal-title {
    font-size: 1.5em !important;
    text-align: center;
}
	 .modal-body {
    position: relative;
    padding: 15px;
    width: 146px;
    margin-left: auto;
    margin-right: auto;
}
	 .btn-primary {
    color: #fff;
    background-color: #004442;
    border-color: #004442;
}
	 @media (min-width: 768px){
.modal-dialog {
    width: 444px;
    margin: 30px auto;
		 }}
	 </style>

<script>
$(document).ready(function(){
  $("li.page_item.page-item-2").click(function(){
    $("#myModal").modal();
  });
});
</script>

Please change “Button/Menu ID or Class” to your Button or Menu ID or Class

5. Create Another Snippet like the screenshot attached
Header Footer Code Manager Body Code
6. In that “Footer”  Snippet put the following code

 
 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Are You Above 18 Years Old?</h4>
			<p>You are going to be redirected to the vendor's store. Thanks</p>	
        </div>
        <div class="modal-body">
			<a href="https://carolinacbdstore.com/product-category/brews" > <button type="button" class="btn btn-primary">Yes</button></a> <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        </div>
         
      </div>
      
    </div>
  </div>

7. Click the Button or Menu (whose ID/ Class) you used and the popup will appear
🙂

If you have any issue feel free to ask me question here in comments section
OR
Pay me some, I will help you for CSS Issue Personally CLICK HERE….

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s