JSFiddle - React, Tailwind, and code Playground

by akash singh

HTML

<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.9.4.min.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.easing.1.3.js"></script>
<form id="myform">
<p> 
    Untraced :<input type="radio" name="inc_untraced"  id="inc_untraced" value="No" required  />No
     <input type="radio" name="inc_untraced" id="inc_untraced" value="Yes"  />Yes
</p>
<input type="submit" name="details" value="Details" id="my-button"   />
</form>
<!-- Element to pop up -->
<div id="element_to_pop_up">
    <a class="b-close">x<a/>
   
</div>

CSS

#element_to_pop_up { 
    background-color:#fff;
    border-radius:15px;
    color:#000;
    display:none; 
    padding:20px;
    min-width:400px;
    min-height: 180px;
}
.b-close{
    cursor:pointer;
    position:absolute;
    right:10px;
    top:5px;
}

JavaScript

$('#myform').bind('submit', function(e) {

                // Prevents the default action to be triggered. 
                e.preventDefault();
                   $('#element_to_pop_up').text("");
                //set text
     $('#element_to_pop_up').text("U have clicked on "+$('#inc_untraced:checked').val());
                // Triggering bPopup when click event is fired
                $('#element_to_pop_up').bPopup();

            });