MVC+Layui彈出表單模態(tài)框的實現(xiàn)代碼
更新時間:2024年01月15日 11:34:05 作者:它朝若是
這篇文章主要介紹了MVC+Layui彈出表單模態(tài)框的實現(xiàn)代碼,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1、Html頁面添加隱藏的form表單
<button class="layui-btn" id="add" lay-on="add">添 加</button>添加按鈕
<form class="layui-form" id="AddForm" method="post" lay-filter="example" style="width:360px;display:none;margin:auto;margin-top:20px">
<div class="layui-form-item">
<label class="layui-form-label">規(guī)格型號:</label>
<input style="margin:auto" type="text" name="specification" lay-verify="required" autocomplete="off" placeholder="請輸入規(guī)格型號" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layui-form-label">物料類型:</label>
<div id="seltype" style="width:280px;margin-left:80px;"></div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">入庫數(shù)量:</label>
<input type="number" style="margin:auto" lay-affix="number" name="storagecount" placeholder="請輸入入庫數(shù)量" lay-verify="required" step="1" min="1" class="layui-input" onKeyUp="this.value=this.value.replace('.','');">
</div>
<div class="layui-form-item">
<label class="layui-form-label">入庫時間:</label>
<input type="text" class="layui-input" id="storagetime" name="storagedt" lay-verify="required" placeholder="yyyy-MM-dd HH:mm:ss">
</div>
<div class="layui-form-item">
<label class="layui-form-label">備注:</label>
<input style="margin:auto" type="text" name="remark" placeholder="備注信息" autocomplete="off" class="layui-input">
</div>
</form>2、js添加彈出框和提交事件
layui.use(function () {
var layer = layui.layer;//彈出框
var form = layui.form;//表單
var laydate = layui.laydate//日期控件
var util = layui.util;//獲取模塊
// 日期時間選擇器
laydate.render({
elem: '#storagetime',
type: 'datetime',//可選多種類型,日期/日期時間等
theme: 'molv'//墨綠色主題顏色
});
util.on('lay-on', {//觸發(fā)控件
'add': function () {//id為add控件
$("#AddForm")[0].reset();//重置form表單
var addLay = layer.open({
type: 1 //Page層類型
, skin: 'layui-layer-molv'//墨綠主題顏色
, area: ['430px']//模態(tài)框大小,盡量比form表單大
, title: ['新增物料入庫', 'font-size:18px;text-align:center']
, btn: ['保存', '取消']
, closeBtn: 0
, shadeClose: false// 點擊遮罩區(qū)域,關(guān)閉彈層
, shade: 0.2 //遮罩透明度
, content: $('#AddForm')//將form表單追加到彈窗中
, success: function (layero) {
var mask = $(".layui-layer-shade");
mask.appendTo(layero.parent());
//彈出層---進行校驗1、將彈出層的確定按鈕 轉(zhuǎn)為layui的form提交按鈕 2、寫自定義的校驗規(guī)則 3、通過from.on實現(xiàn)
//1.1 條件form標(biāo)識
layero.addClass('layui-form');
//1.2 將保存按鈕轉(zhuǎn)為提交按鈕
layero.find('.layui-layer-btn0').attr({
'lay-filter': 'formaddButton',
'lay-submit': ''
})
getmateriallist();//具體實現(xiàn)看上一篇復(fù)選下拉框
}
, yes: function () {//yes表示定義的第一個按鈕
//3.1 點擊form表單的 "提交"按鈕,會先進行自定義的校驗
form.on('submit(formaddButton)', function (data) {
data.field.materiallists = seltype.getValue()//具體實現(xiàn)看上一篇復(fù)選下拉框
$.ajax({
url: 'XXX',
data: data.field,//根據(jù)name值傳遞
type: 'POST',
success: function (res) {
if (res.Status === "Success") {
layer.close(addLay);//關(guān)閉當(dāng)前窗口
document.getElementById("AddForm").style.display = "none"http://隱藏form表單
//彈出消息框
layer.msg(res.Message, {
icon: 1,
time: 500 //0.5秒關(guān)閉(如果不配置,默認(rèn)是3秒)
}, function () {
//當(dāng)前數(shù)據(jù)進行刷新,新增內(nèi)容清空
});
}
else {
layer.msg(res.Message, { icon: 2 });
}
}
})
})
}
, btn2: function () {
document.getElementById("AddForm").style.display = "none"http://隱藏
layer.close(addLay);
}
});
},
})
})到此這篇關(guān)于MVC+Layui彈出表單模態(tài)框的文章就介紹到這了,更多相關(guān)MVC Layui模態(tài)框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
深入解析JavaScript編程中的this關(guān)鍵字使用
這篇文章主要介紹了深入解析JavaScript編程中的this關(guān)鍵字使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-11-11
JavaScript Break 和 Continue區(qū)別教程
JavaScript Break 和 Continue區(qū)別教程...2007-04-04
js阻止默認(rèn)事件與js阻止事件冒泡示例分享 js阻止冒泡事件
嵌套的div元素,如果父級和子元素都綁定了一些事件,那么在點擊最內(nèi)層子元素時可能會觸發(fā)父級元素的事件,下面介紹一下js阻止默認(rèn)事件與js阻止事件冒泡示例,大家參考使用吧2014-01-01

