JSFiddle - React, Tailwind, and code Playground

This attaches a popup dialog to a button. Uses the infx popup. Also demonstates how to pickup form fields into json object ready to be ajax parameters.

by Ben Clayton

HTML

<script src="http://www.sourcebmx.com/script/minified/jquery-ecommerce.js"></script>
<base href="http://www.sourcebmx.com/" />
<fieldset>
<form>
    <input type='hidden' name='cb_issue.id' value='1234'/>
    <input type='hidden' name='classname' value='cb_issue'/>
    Surname:<input type='text' name='Surname' value=''/><br/>
    Priority:<select name='priority'>
        <option value='low'>Low</option>
        <option value='med'>Medium</option>
        <option value='high'>High</option>
    </select><br/>
    Accept T&amp;C:<input type='checkbox' value='1' name='accept'/><br/>

    <input type='button' class='cb_issue_assign_factory' value='Dialog' />
</form>
</fieldset>
<fieldset>
<form>
    <input type='hidden' name='cb_comment.id' value='99'/>
    <input type='hidden' name='classname' value='cb_comment'/>
    <input type='button' class='cb_issue_assign_factory' value='Dialog' />
</form>
</fieldset>

CSS

/************************************************************************************************/
/* POPUP FORM STYLING                                                  								*/
/************************************************************************************************/
#popup_form * 		{ margin:0px; text-align:left; }
#popup_form		{ z-index:41; position:relative; top:0px; background-color:#eeeeee; border: 5px solid #333; padding-bottom: 8px; }
#popup_form p 		{ font-size:11px; line-height:14px; padding: 8px; }
#popup_form .formleft 		{ width:125px; float:left; }
#popup_form .formright 		{ margin-left:325px; padding-right:8px; padding-top:14px; }
#popup_form h2 		{ font-size:14px;font-weight:bold;color:#ffffff;background-color:#121212;padding:5px;margin-bottom:5px; }
#popup_form label  		{ color:#121212; }
#popup_form .astrix		{ color:#624215; }
#popup_form .padding		{ padding:5px; }
#popup_form .textbox, #popup_form textarea, #popup_form select { width:300px;border:1px solid #9f9f9f;padding:3px; margin-left:5px; background-color:#d6d6d6;color:#444444;font-weight:bold; }
#popup_form textarea 		{width:280px}
#popup_form input:focus, #popup_form textarea:focus, #popup_form select:focus { background-color:#fff3f8; }
#popup_form #message 		{ margin:5px; }

#popup_form .options		{ width:200px; margin-top:10px; }
#popup_form .options td 		{ font-size:11px; padding-bottom:5px; }
#popup_form .btn 		{ float:right; margin-top:5px; }
#popup_form .product_overview 	{ text-align:left; margin-bottom:10px; }
#popup_form .product_overview .stock-message	{ margin-top:4px; width:98%; border-radius: 6px; }

#popup_form #invoice h2		{ font-size:13px; font-weight:bold; color:#111111; margin-bottom:0px; padding-bottom:0px;background-color:transparent; }
#popup_form .iborderS		{ padding:10px; }

#popup_form .close		{ float:right; background: url('/images/icons/cross.png') no-repeat; line-height:18px; width:18px; cursor:pointer; margin-right:5px; margin-top:8px;...

JavaScript

$.fn.infxjdialog=function(options){
    var base=this;
    var settings=$.extend({ac:'getdata'},options);
    var control=$(this);
    console.dir(control);
    base._dialogbutton =function(ev){
       var idx=$('#jq-popup .dialog_button').index($(ev.currentTarget));
       console.log(idx);
        var ret=1;
        if(settings.itemclick){
            ret=settings.itemclick(idx,settings.data[idx],control);
        }
        if(ret) _popup.close();
    }
    $(base).on('click',function(){
        var html = settings.html || "";
        _popup.create({html:html,closeicon:true,width:300});
        $('#jq-popup .dialog_button').on('click',function(ev){
            base._dialogbutton(ev);
        });
        
    });
    return this;
}

$.fn.infxJsonForm=function(options){
    var settings=$.extend({"as_str":0,"unchecked_value":0},options);

    var fieldArr = $(this).serializeArray();
    var fields = {};
    for (var i in fieldArr) {
        fields[fieldArr[i].name] = fieldArr[i].value;
    }
    
    if(settings.include_unchecked){
        $(this).find("input:checkbox:not(:checked)").each(function(){
            fields[$(this).attr("name")] = settings.unchecked_value;
        });
    }
    if(settings.as_str){
        return JSON.stringify(fields)
    }
    return fields
}

$(document).ready(function(){

    //_popup.create({html:'FRED',closeicon:true,width:300});
    $('.cb_issue_assign_factory').each(function(){$(this).infxjdialog({
        html:"one <input type='button' class='dialog_button'/><br/>"+
        "two <input type='button' class='dialog_button'/><br/>"+
        "three <input type='button' class='dialog_button'/><br/>",
        data:[{name:"ben",id:33},{name:"sid",id:44},{name:"harry",id:55}],
        itemclick:function(idx,item,control){
            var frm=control.closest('form');
            var obj=$.extend({"factory":item.name},frm.infxJsonForm({"include_unchecked":1}));
            alert(JSON.stringify(obj));

            return 1;
        }
  ...