html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例
實(shí)現(xiàn)功能
提交按鈕功能：
點(diǎn)擊提交按鈕的時(shí)候都會彈出模態(tài)框，但是有不同的狀態(tài)：
審核狀態(tài)未通過：彈出未通過理由的input輸入框，模態(tài)框中除了取消和確定按鈕，新增確定并保存醫(yī)院的按鈕
審核狀態(tài)已通過：如果新增醫(yī)院的經(jīng)緯度沒有填寫，會提示填寫經(jīng)緯度，填寫之后點(diǎn)擊提交按鈕，模態(tài)框中顯示確定和取消按鈕
審核狀態(tài)待審核：模態(tài)框中顯示確定和取消按鈕
添加醫(yī)院的html代碼：
所屬醫(yī)院
@if($data->hospitalid > 0) **如果醫(yī)院的id>0,就是存在對應(yīng)的醫(yī)院，讓下面的輸入框不能修改**
@else **如果醫(yī)院的id<=0,就是不存在對應(yīng)的醫(yī)院，讓下面的輸入框可以修改，同時(shí)填寫醫(yī)院的經(jīng)緯度**
class='hospitalLocation form-control hospitalLocation1' >
class='hospitalLocation form-control hospitalLocation2' >
@endif
審核狀態(tài)的相關(guān)html代碼：
審核狀態(tài)
is_verify == 1) disabled @endif name="is_verify" data="{{$data->is_verify}}" style="width:100px;position:relative">
is_verify == 1) selected @endif>未通過
is_verify == 2) selected @endif>已通過
is_verify == 0) selected @endif>待審核
**如果未通過審核的話會彈出這個(gè)input輸入框，填寫未通過理由**
總的表單提交按鈕html代碼：
提交
**這個(gè)提交按鈕的功能與上面的審核狀態(tài)和添加醫(yī)院相關(guān)信息有關(guān)系**
點(diǎn)擊提交按鈕的時(shí)候，彈出模態(tài)框，此時(shí)的模態(tài)框有兩種狀態(tài)：
1.
返回
模態(tài)框的相應(yīng)html代碼：
aria-hidden="true">×
確認(rèn)提交嗎？
{{--
--}}{{--
--}}取消
確定
確定并保存醫(yī)院
js代碼：
var hospitalId = {{$data->hospitalid}}; **拿到對應(yīng)醫(yī)院的id**
**下面是點(diǎn)擊提交按鈕時(shí)的處理函數(shù)**
$('#edit-submit').click(function () {
is_verify = $('select[name=is_verify]').val(); **拿到審核狀態(tài)下拉框的值**
if (is_verify == 1) { **未通過的時(shí)候**
if (!$('input[name=check_reason]').val()) {
layer.msg('請?zhí)顚懳赐ㄟ^理由'); **如果選擇未通過的時(shí)候，后面的未通過理由沒有填寫，值為空，彈出提示信息請?zhí)顚懳赐ㄟ^理由**
return false;
}
}
if (hospitalId <= 0) { **如果醫(yī)院不存在的話**
if (is_verify == 1) { //審核未通過
$('#save_hospital_btn').show() **模態(tài)框中新增確定并保存醫(yī)院的按鈕出現(xiàn)**
} else if(is_verify == 2) { //審核通過
if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) {
layer.msg('請?zhí)顚戓t(yī)院的經(jīng)緯度'); **所屬醫(yī)院下面的經(jīng)緯度有一個(gè)沒填寫都會彈出提示信息**
return false;
}
$('#save_hospital_btn').hide() **模態(tài)框中新增確定并保存醫(yī)院的按鈕消失**
} else { **這個(gè)else中的條件就是 ： 待審核中**
$('#save_hospital_btn').hide() **模態(tài)框中新增確定并保存醫(yī)院的按鈕消失**
}
}
$('#confirmSubmit').modal('show'); **只要點(diǎn)擊提交按鈕模態(tài)框就會顯示**
});
$(function(){
$(":input[name=is_verify]").on("change",function(e){ **審核狀態(tài)的下拉列表發(fā)生變化的時(shí)候觸發(fā)這個(gè)函數(shù)**
console.log($(this).attr("data"),$(this).val());
if($(this).attr("data") == 1){
layer.msg('已通過審批用戶不可繼續(xù)審批',{time:1000},function () {
$(this).val(1);
$(this).reset();
});
return false;
} else {
if ($(this).val() == 1) { **如果審核狀態(tài)是未通過，顯示輸入未通過理由的input輸入框**
$('.Nopass').show();
} else {
$('.Nopass').hide();
}
}
});
});
function save(save_hospital){ **觸發(fā)模態(tài)框中新增確定并保存醫(yī)院的按鈕的函數(shù)** **save_hospital 是要傳遞的參數(shù)**
data = $('#postform').serializeArray() **得到提交表單中的所有數(shù)據(jù)**
if (save_hospital) { **如果要傳遞的參數(shù)已經(jīng)存在**
if (!$('input[name=hospital_lat]').val() || !$('input[name=hospital_lng]').val()) {
layer.msg('請?zhí)顚戓t(yī)院的經(jīng)緯度'); **如果經(jīng)緯度有一個(gè)沒填寫就彈出這個(gè)信息**
return false;
}
data.push({name:'save_hospital',value:1}); **將這個(gè)醫(yī)院保存到數(shù)據(jù)中**
}
$.ajax({
type: 'POST',
url : "{{url('admin/pyhsician/')}}/"+{{$data->id}},
dataType: 'json',
data: data,
success: function(data){
if(data.status==1){
layer.msg(data.message);
setTimeout(function(){//兩秒后跳轉(zhuǎn)
window.location.href = data.url;
},1000);
}else{
alert(data.message);
}
},
error:function(data){
if (data.status == 422) {
var json=JSON.parse(data.responseText);
json = json.errors;
for ( var item in json) {
for ( var i = 0; i < json[item].length; i++) {
layer.msg(json[item][i],{time:1000});
return ; //遇到驗(yàn)證錯(cuò)誤，就退出
}
}
} else {
layer.msg('服務(wù)器連接失敗',{time:1000});
}
return ;
}
});
return false;
function success(data) {
if (data.status == 0) {
alert(data.message);
} else {
window.location.href = data.url;
}
};
}
以上所述是小編給大家介紹的js彈出模態(tài)框方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對網(wǎng)站的支持！
總結(jié)
以上是生活随笔為你收集整理的html单击按钮时弹出输入框,点击按钮弹出模态框的一系列操作代码实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： html元素和属性,HTML常用元素和属
- 下一篇： html ie浏览器视频无法播放视频,H