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

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

You can take my personal help in skype : om2000_cuet

Here is the steps I used:

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

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

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



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">×</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

You can take my personal help in skype : om2000_cuet
Like this post?
Tweet
Email
WhatsApp
Print
Like this:
Like Loading...


	
Related