How to Show PopUp if clicked radio button?

I need to show a popup along with custom information if customer select radio button.

You need to use javascript


1 Like

I am a newbie, make a pardon nonsense mistake.

I just take code form

and put into my local system after run the code i will something like,

my localhost code:


<script type="text/javascript">

  $(document).ready(function() {
    $("input[name$='bn']").click(function() {
      var radio_value = $(this).val();
      if (radio_value == '0') {
      } else if (radio_value == '1') {

  $('input[name="bn"]').change(function() {
   if($(this).is(':checked') && $(this).val() == '0') {




  <div class="container-fluid myBackground2">
  <div class="row">
  <div style="text-align: center;">
  <div style="display: inline-block; text-align: left">
  <h3>Name: %Name Goes Here%</h3>
  <p>Is the information above accurate?</p>

  <div class="row">
  <div class="col-lg-12 optionFill" style="text-align: center;">
  <div class="radio radio-success radio-inline">
  <input type="radio" id="inlineRadio1" value="1" name="bn">
  <label for="inlineRadio1">Yes</label>
  <div class="radio radio-danger radio-inline">
  <input type="radio" id="inlineRadio2" value="0" name="bn">
  <label for="inlineRadio2">No</label>
  <a href="" button type="button" class="btn btn-primary btn-lg" id='dlcert' style="display: none;">Download Certificate</a>

  <div id="contact">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
  <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4 class="modal-title" id="myModalLabel">Incorrect Certificate Information</h4>
  <div class="modal-body" style="text-align:center;">
  <p>Please contact Nathan Finch at PPE</p>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

Any help thanks

You are using jQuery, so you going to have to add the jQuery library.

Add this above the javascript:

<script src=""></script>

I’m assuming you have a continuous internet connection otherwise you going to have to download a standalone jQuery Library.

BTW doing something that you are doing would be easy to do in vanilla-js as well. I’m a vanilla-js person and I haven’t worked in JQuery for sometime, so I will probably be no help there. However, I am sure others here are more comfortable with JQuery.

after adding

<script src=""></script>

output nothing changes.

I’m a Vanilla-js person, so I’m not going to be that helpful with jQuery as I haven’t worked with jQuery in a long time. However, I’m sure others are and will be able to help. Though I can say console.log is a great debugging tool that you use with most browser. Do a Google search should have tutorials on how to use it.

1 Like

Thank You for your help :+1:

Sponsor our Newsletter | Privacy Policy | Terms of Service