點擊按鈕彈出模態(tài)框的一系列操作代碼實例
更新時間：2019年03月29日 10:47:35 作者：Isleta_
這篇文章主要介紹了js彈出模態(tài)框方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
實現(xiàn)功能
提交按鈕功能：
點擊提交按鈕的時候都會彈出模態(tài)框，但是有不同的狀態(tài)：
審核狀態(tài)未通過：彈出未通過理由的input輸入框，模態(tài)框中除了取消和確定按鈕，新增確定并保存醫(yī)院的按鈕
審核狀態(tài)已通過：如果新增醫(yī)院的經(jīng)緯度沒有填寫，會提示填寫經(jīng)緯度，填寫之后點擊提交按鈕，模態(tài)框中顯示確定和取消按鈕
審核狀態(tài)待審核：模態(tài)框中顯示確定和取消按鈕
添加醫(yī)院的html代碼：
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">
<span class="required">所屬醫(yī)院</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
@if($data->hospitalid > 0) **如果醫(yī)院的id>0,就是存在對應(yīng)的醫(yī)院，讓下面的輸入框不能修改**
<input type="text" id="first-name" disabled value="{{$data->hospital->name}}" required="required" class="form-control col-md-7 col-xs-12">
@else **如果醫(yī)院的id<=0,就是不存在對應(yīng)的醫(yī)院，讓下面的輸入框可以修改，同時填寫醫(yī)院的經(jīng)緯度**
<input type="text" id="first-name" name="hospital_info" value="{{$data->hospital_info}}" required="required" class="form-control col-md-7 col-xs-12">
<div>
<input type="text" name="hospital_lat" placeholder="請輸入醫(yī)院經(jīng)度"
class='hospitalLocation form-control hospitalLocation1' >
<input type="text" name="hospital_lng" placeholder="請輸入醫(yī)院緯度 "
class='hospitalLocation form-control hospitalLocation2' >
</div>
@endif
</div>
</div>
審核狀態(tài)的相關(guān)html代碼：
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">審核狀態(tài)</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control choose" required="" @if($data->is_verify == 1) disabled @endif name="is_verify" data="{{$data->is_verify}}" style="width:100px;position:relative">
<option value="1" @if($data->is_verify == 1) selected @endif>未通過</option>
<option value="2" @if($data->is_verify == 2) selected @endif>已通過</option>
<option value="0" @if($data->is_verify == 0) selected @endif>待審核</option>
</select>
<input type="text" placeholder='填寫未通過理由' name="check_reason" class='Nopass' value="{{$data->check_reason}}" style='display:none'>
**如果未通過審核的話會彈出這個input輸入框，填寫未通過理由**
</div>
</div>
總的表單提交按鈕html代碼：
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button type="button" class="btn btn-success" id="edit-submit" >提交</button>
**這個提交按鈕的功能與上面的審核狀態(tài)和添加醫(yī)院相關(guān)信息有關(guān)系**
點擊提交按鈕的時候，彈出模態(tài)框，此時的模態(tài)框有兩種狀態(tài)：
1.
<button class="btn btn-primary" type="reset" onclick="javascript:history.back();">返回</button>
</div>
</div>
模態(tài)框的相應(yīng)html代碼：
<div class="modal fade" tabindex="-1" role="dialog" id="confirmSubmit">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title">確認(rèn)提交嗎？</h4>
</div>
{{--<div class="modal-body">--}}
{{--</div>--}}
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="save()" >確定
</button>
<button id="save_hospital_btn" style="display: none" type="button" class="btn btn-primary" data-dismiss="modal" onclick="save(1)" >確定并保存醫(yī)院
</button>
</div>
</div>
</div>
</div>
js代碼：
var hospitalId = {{$data->hospitalid}}; **拿到對應(yīng)醫(yī)院的id**
**下面是點擊提交按鈕時的處理函數(shù)**
$('#edit-submit').click(function () {
is_verify = $('select[name=is_verify]').val(); **拿到審核狀態(tài)下拉框的值**
if (is_verify == 1) { **未通過的時候**
if (!$('input[name=check_reason]').val()) {
layer.msg('請?zhí)顚懳赐ㄟ^理由'); **如果選擇未通過的時候，后面的未通過理由沒有填寫，值為空，彈出提示信息請?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)緯度有一個沒填寫都會彈出提示信息**
return false;
}
$('#save_hospital_btn').hide() **模態(tài)框中新增確定并保存醫(yī)院的按鈕消失**
} else { **這個else中的條件就是 ： 待審核中**
$('#save_hospital_btn').hide() **模態(tài)框中新增確定并保存醫(yī)院的按鈕消失**
}
}
$('#confirmSubmit').modal('show'); **只要點擊提交按鈕模態(tài)框就會顯示**
});
$(function(){
$(":input[name=is_verify]").on("change",function(e){ **審核狀態(tài)的下拉列表發(fā)生變化的時候觸發(fā)這個函數(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)緯度有一個沒填寫就彈出這個信息**
return false;
}
data.push({name:'save_hospital',value:1}); **將這個醫(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 ; //遇到驗證錯誤，就退出
}
}
} 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)框方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
JavaScript中防抖和節(jié)流的實戰(zhàn)應(yīng)用記錄
防抖與節(jié)流都是用來限制用戶頻發(fā)觸發(fā)事件的機制,下面這篇文章主要給大家介紹了關(guān)于JavaScript中防抖和節(jié)流的實戰(zhàn)應(yīng)用,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
javascript作用域鏈與執(zhí)行環(huán)境詳解
這篇文章主要為大家詳細(xì)介紹了javascript作用域鏈與執(zhí)行環(huán)境，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了如何實現(xiàn)js拖拽效果及原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了javascript實現(xiàn)自動填寫表單的方法,以一個簡單實例形式分析了JavaScript結(jié)合瀏覽器設(shè)置實現(xiàn)自動保存表單的相關(guān)技巧,需要的朋友可以參考下2015-12-12
Google的跟蹤代碼 動態(tài)加載js代碼方法應(yīng)用
Google的跟蹤代碼 動態(tài)加載js代碼，需要的朋友可以參考下2012-11-11
這篇文章主要介紹了無刷新預(yù)覽所選擇的圖片的具體實現(xiàn),需要的朋友可以參考下2014-04-04
JS清空上傳控件input(type="file")的值的代碼
最近做的一個小功能，需要清空<input type="file">的值，但上傳控件<input type="file">的值不能通過JavaScript來修改。2008-11-11
這篇文章主要給大家介紹了關(guān)于JS數(shù)組去重的九種高階方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了js實時獲取并顯示當(dāng)前時間的方法,涉及javascript針對時間及頁面元素的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JavaScript回調(diào)函數(shù)callback用法解析
這篇文章主要介紹了JavaScript回調(diào)函數(shù)callback用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01