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