div弹出窗口+表单事件

最新版本连接地址（有效果图）：https://blog.csdn.net/fly19920602/article/details/108746283

 

以下为旧版本

 

Html代码当前页找个地方嵌进去不要影响页面整体结构就行，

主要是没触发这个窗口弹出前是隐藏的

 

这里为了方便我加用了Jbox  ,依赖jquery1.8x，高版本的jquery我这边试过不支持jbox ,比如我试过的 jquery2.x

Jbox也是弹出框，点击查看JBOX详细运行案例

Html

<div id="MyDiv" class="white_content">
    <s:form action="todosomething.html" id="applyFMaskForm" theme="simple" method="post" enctype="multipart/form-data">t
        <div class="top-div">
            <div style="color: white;width: 95%;font-size: 13px;line-height: 24px;padding-left: 10px;font-weight: bold;">
                窗口名称
            </div>
            <div class="closeBtn" onclick="closeBtn()" style="color: white;padding-right: 2px;font-weight: bold;">X
            </div>
        </div>
        <div style="text-align: right; cursor: default; height: 40px;">
            <div class="list-t" style="margin-top: 20px">
                <div class="table-t">数量：</div>
                <input type="text" class="qty" name="qty"/>&nbsp;&nbsp;PCS
            </div>
            <div class="list-t">
                <div class="table-t">国家：</div>
                <select name="country" onchange="selectCo()">
                    <option  value="1"/>秦国</option>
                    <option  value="2">赵国</option>
                </select>
            </div>
            <div class="list-t">
                <div class="table-C" style="width: 29%;">地址：</div>
                <textarea id="texta" style="border:none; width: 63%;height: 34px; resize: none; background: white;"  readonly cols="25" rows="2">广州石牌坊 </textarea>
                <input type="hidden" id="tad" name="takeAdress">
            </div>

            <div class="list-b" style="display: flex;justify-content: center;padding-top: 25px;">
                <div class="b-re"
                     style="border: 1px solid #f0f0f0;border-radius: 3px; font-size:14px;text-align: center;width: 42px; "
                     onclick="fmBack()">返回
                </div>
                <div class="b-sub"
                     style="border: 1px solid #f0f0f0;border-radius: 3px; background: #0088cc;font-size:14px;text-align: center;width: 42px;margin-left: 20px;color: white;"
                     onclick="applyBDC()">提交
                </div>
            </div>
        </div>
    </s:form>
</div>

 

 CSS

/*弹出框*/
.black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 18%;
    left: 39%;
    width: 300px;
    height: 250px;
    border: 1px solid #d4d4d4;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    position: fixed;
}

.top-div {
    display: flex;
    height: 25px;
    background: #0088cc;
}

.closeBtn {
    width: 5%;
    cursor: pointer;
}

.list-t {
    display: flex;
    justify-content: left;
    font-size: 14px;
    color: black;
    padding: 5px;
}

.list-t .table-t {
    padding-left: 13px;
}

.list-t input {
    width: 100px;
    height: 21px;
}

.list-t input:nth-child(1) {
    margin-top: 10px;
}

.list-t select {
    width: 100px;
    height: 25px;
}

 

Js

/**
 * 把这个方法放到你点击弹出框的地方
 */
function applyaa() {
   ShowDiv('MyDiv','fade');
}


function  selectCo() {
   var select=$('select option:selected').text();

   if(select.includes("DJIBOUTI")){
        $(".qty").val(500);
        $("#texta").val("Djibouti International Hotel, PK23, Djibouti. ");
   }else {
        $(".qty").val(300);
        $("#texta").val("Warehouse address: DIFTZ, PK23, ETHIOPIA");
   }
}


function ShowDiv(show_div,bg_div){
    document.getElementById(show_div).style.display='block';
    document.getElementById(bg_div).style.display='block' ;
    var bgdiv = document.getElementById(bg_div);
    bgdiv.style.width = document.body.scrollWidth;
    // bgdiv.style.height = $(document).height();
    $("#"+bg_div).height($(document).height());


    $sellers = $("input[name='delCode']:checked");

    var cabObj=$("input[name='delCode']:checked").parent().children("input[name='cabNode']");
    var slCountryV=$("input[name='delCode']:checked").parent().children("input[name='slCountry']").val();

    if(slCountryV=="22755"&&slCountryV=="137"){//桂林瓦窑批发市场
      $(".qty").val(500);
        cabObj.val("桂林瓦窑批发市场");
   }else if(slCountryV=="140"){//广州石牌坊
      $(".qty").val(300);
      cabObj.val("广州石牌坊");
   }else {
        $(".qty").val(500);
        cabObj.val("Warehouse address: DIFTZ, PK23, Djibouti");
   }

    // jQuery.prevAll()
    // var cab = $sellers.parentElement.children();
    // var slc = $sellers.parentNode.children("input[name='slCountry']");
    // alert(slc.value);

};

//关闭弹出层
function closeBtn() {
    document.getElementById("MyDiv").style.display='none';
    document.getElementById("fade").style.display='none';
};


function applyBDC() {

    var slid = $sellers.val();

    var tov=document.getElementById("texta").value;
    var iobj=document.getElementById("tad");
    iobj.value=tov;
    $(".takeAdress")
   var fMaskDatas=$("#applyFMaskForm").serialize();
    fMaskDatas+= '&seller.slCode='+slid;
   closeBtn();//关闭弹出窗
    $.jBox.confirm("确定提交吗?", "提示", function(v, h, f) {
        if (v == 'ok') {
            $.ajax({
                url : "applyFMask.html?rnd=" + Math.random(),
                data: fMaskDatas,
                dataType : 'json',
                type : "POST",
                success : function(result) {
                    if (result.code == 1) {

                        var submit1 = function (v, h, f) {
                           alert(111);
                            if (v == 'yes') {
                                fmBack();
                            }
                            return true;
                        };

                         $.jBox.warning(result.message+"<br/>appKey:" + result.value, "提示",submit1);

                    } else {

                        var submit1 = function (v, h, f) {

                            fmBack();
                            return true;
                        };

                        $.jBox("&nbsp;&nbsp;" +result.message+"<br/>" , { title: "提示", submit: submit1 });


                        // $.jBox.info(result.message);
                    }
                },
                complete : function(xhr, stats) {
                    if (stats != "success") {
                        $.jBox.info("操作失败，请刷新页面重试！");
                    }
                }

            });
            return true;
        } else if (v == 'cancel') {
        }
        return true; // close
    });


};

function fmBack() {
   window.location.reload();
}