bootstrap實(shí)現(xiàn)彈窗和拖動(dòng)效果
有時(shí)開(kāi)發(fā)一些特效,自己感覺(jué)挺爽的,像操作自己電腦一樣操作你的網(wǎng)頁(yè),這里就介紹一個(gè)使用bootstrap的一點(diǎn)多窗口和拖動(dòng)效果吧!
這里,我們不使用靜態(tài)打開(kāi)的的方式,low...,1、添加一個(gè)a鏈接 觸發(fā),打開(kāi)按鈕;2、編寫動(dòng)態(tài)打開(kāi)js腳本; 3、編寫modal中間內(nèi)容;4、添加拖動(dòng)效果;5、打開(kāi)多個(gè)modal , 調(diào)用dragModal(new Array('modalId1','modalId2'));
1、添加一個(gè)a鏈接 觸發(fā),打開(kāi)按鈕:
<a href="javascript:;" title="開(kāi)關(guān)" class="open-modal-dynamic" url="index.php?m=index&c=cc&a=aa&id=22" alert='1' divid="editModal">打開(kāi)modal<a> <div id="addModal" class="modal hide fade" style="max-width:800px;" data-backdrop="static"></div> <!-- 打開(kāi)容器 -->
2、編寫動(dòng)態(tài)打開(kāi)js腳本:
//打開(kāi)彈窗
$('.open-modal-dynamic').on('click', function(){
var modalId = $(this).attr('divid') ? $(this).attr('divid') : 'Modal', url = $(this).attr('url');
$.get(url, function(data){
if(data.status == 1){
//禁止選擇文字,在拖動(dòng)時(shí)會(huì)有影響
$('html').off('selectstart').on('selectstart', function(){return false;});
$('#' + modalId).html(data.htmlData);
$('#' + modalId).modal({'show':true});
}else{
alert(data.info);
}
}, 'json');
3、編寫modal中間內(nèi)容:
<style>
.line{margin-bottom: 5px;}
.line .left{width: 100px;text-align:right;display:block;}
.form-button{padding:2px 10px;background:#73A86A;color:#ffffff;border:none;}
.form-button:hover{background:#146206;}
</style>
<div class="modal-header">
<a class="close" title="關(guān)閉小窗口" data-dismiss="modal">×</a>
<h3>modal window<h3>
</div>
<div class="modal-body" style="padding-bottom: 5px;">
<div class="line">
<span class="left">腳本名稱:</span>
<span>
<select name="name">
<option value='11'>11</option>
<option value='22'>22</option>
</select>
</span>
</div>
<div class="line">
<span class="left">日期:</span>
<span style="word-break:break-all;" title="的時(shí)間">
<input class="Wdate ipt date-picker" style="width: 100px;margin: 0;" type="text" id="date_add" value="" />
</span>
</div>
<div class="line" title="設(shè)置">
<span class="left">是否停止:</span>
<span>
<label><input type="radio" name="is_del_add" value="1" />強(qiáng)制停止</label>
<label><input type="radio" name="is_del_add" value="0" />正常處理</label>
</span>
</div>
<div class="line" title="按照實(shí)際情況允許進(jìn)行模擬更改">
<span class="left">執(zhí)行情況:</span>
<span>
<label><input type="radio" name="status_add" value="5" onclick="javascript:return confirm('你確定要操作該狀態(tài)嗎,這是系統(tǒng)的操作,請(qǐng)確認(rèn)?');" />11</label>
<label><input type="radio" name="status_add" value="1" onclick="javascript:return confirm('你確定要操作該狀態(tài)嗎,這是系統(tǒng)的操作,請(qǐng)確認(rèn)?');" />22成</label>
<label><input type="radio" onclick="javascript:return confirm('你確定要操作該狀態(tài)嗎,這是系統(tǒng)的操作,請(qǐng)確認(rèn)?');" name="status_add" value="2"/>223行</label>
<label><input type="radio" onclick="javascript:return confirm('你確定要操作該狀態(tài)嗎,這是系統(tǒng)的操作,請(qǐng)確認(rèn)?');" name="status_add" value="0" />445</label>
<label><input type="radio" onclick="javascript:return confirm('你確定要操作該狀態(tài)嗎,這是系統(tǒng)的操作,請(qǐng)確認(rèn)?');" name="status_add" value="4" />55失敗</label>
</span>
</div>
<div class="line">
<span>操作說(shuō)明:</span>
<textarea name="memo" id="memo" cols="100" rows="1" style="width:370px;></textarea>
</div>
<div class="line" style="text-align:center;">
<input type="button" value="提交" class="form-button" id="submit2" />
<input type="hidden" id="id_add" value="22" />
</div>
</div>
<div class="modal-footer">
<span class="loading"></span>
<button class="btn" data-dismiss="modal" aria-hidden="true">關(guān)閉</button>
</div>
<script src="/js/dragModal.js"></script>
<script>
$(function(){
$('#submit2').off().on('click', function(){
var status = $('input[name=status_add]:checked').val(),
memo = $('#memo').val(),
id = parseInt($('#id_add').val()),
is_del = $('input[name=del_add]:checked').val(),
cron_name = $('#name_add').val(),
cron_date = $('#date_add').val(),
url ='index.php?m=xx&c=xx&a=';
if(!memo){
alert('請(qǐng)?zhí)顚懖僮鱾渥?,如不處理,?qǐng)直接關(guān)閉對(duì)話框!');
return false;
}
$.post(url, {status: status, cron_name:cron_name, memo: memo, id: id, cron_date: cron_date, is_del: is_del}, function(data){
if(data.status == 1){
alert(data.info);
window.location.reload();
}else{
alert(data.info);
}
}, 'json')
});
});
// drag effects begin, define the global variables to receive the changes,because of the different function of the modal
dragModal('editModal');
</script>
4、添加拖動(dòng)效果:
var clicked = "0";
var dif = {};
;function dragModal(obj) {
if(clicked == undefined || obj == undefined || dif == undefined){
return false;
}
if(typeof obj == 'string')
{
obj = new Array(obj);
}
var modalNums = obj.length;
//drag effects begin
var i = 0;
for (i = 0; i < modalNums; i++) {
dif[obj[i]] = {'difx': 0, 'dify': 0};
}
$("html").off('mousemove').on('mousemove', function (event) {
if (clicked == "0") {
for (i = 0; i < modalNums; i++) {
dif[obj[i]].difx = event.pageX - $("#" + obj[i]).offset().left;
dif[obj[i]].dify = event.pageY - $("#" + obj[i]).offset().top;
}
}
if (clicked > 0 && clicked <= modalNums) {
var clickedObj = obj[clicked - 1];
var newx = event.pageX - dif[clickedObj].difx - $("#" + clickedObj).css("marginLeft").replace('px', '');
var newy = event.pageY - dif[clickedObj].dify - $("#" + clickedObj).css("marginTop").replace('px', '');
$("#" + clickedObj).css({top: newy, left: newx});
}
});
$("html").off('mouseup').on('mouseup', function (event) {
clicked = "0";
});
for(i = 0; i < modalNums; i++){
//注重此處不能直接傳入i值,此處即為添加多窗口時(shí)的效果使用
$("#" + obj[i] + " .modal-header").off().on('mousedown',{index: i}, function (event) {
clicked = event.data.index + 1;
});
$("#" + obj[i] + " .modal-footer").off().on('mousedown', {index: i}, function (event) {
clicked = event.data.index + 1;
});
$('#' + obj[i]).on('hide.bs.modal', function () { //關(guān)閉時(shí)打開(kāi)選中
$('html').off('selectstart').on('selectstart', function () {
return true;
});
});
}
}
5、打開(kāi)多個(gè)modal , 調(diào)用dragModal(new Array('modalId1','modalId2'));
整個(gè)過(guò)程即是如此,有需要的,就參考參考吧!
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
相關(guān)文章
JavaScript簡(jiǎn)單生成 N~M 之間隨機(jī)數(shù)的方法
這篇文章主要介紹了JavaScript簡(jiǎn)單生成 N~M 之間隨機(jī)數(shù)的方法,結(jié)合自定義函數(shù)分析了JS生成固定區(qū)間內(nèi)隨機(jī)數(shù)的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01
JavaScript中this關(guān)鍵字用法實(shí)例分析
這篇文章主要介紹了JavaScript中this關(guān)鍵字用法,結(jié)合實(shí)例形式總結(jié)分析了javascript中this關(guān)鍵字在不同條件下的指向問(wèn)題與相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
JavaScript塊級(jí)作用域綁定的實(shí)現(xiàn)流程
這篇文章主要給大家介紹了關(guān)于JavaScript塊級(jí)作用域綁定的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
JS實(shí)現(xiàn)利用兩個(gè)隊(duì)列表示一個(gè)棧的方法
這篇文章主要介紹了JS實(shí)現(xiàn)利用兩個(gè)隊(duì)列表示一個(gè)棧的方法,簡(jiǎn)單分析了使用兩個(gè)隊(duì)列表示一個(gè)棧的原理,并結(jié)合具體實(shí)例分析了javascript相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
封裝一個(gè)公用Echarts圖表組件的3種模板代碼示例
這篇文章主要給大家介紹了關(guān)于封裝一個(gè)公用Echarts圖表組件的3種模板,定義圖表公共樣式是為了統(tǒng)一同一網(wǎng)站各頁(yè)面圖表的基礎(chǔ)樣式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
js 判斷當(dāng)前時(shí)間是否處于某個(gè)一個(gè)時(shí)間段內(nèi)
這篇文章主要介紹了js 判斷當(dāng)前時(shí)間是否處于某個(gè)一個(gè)時(shí)間段內(nèi),使用 jutils - JavaScript常用函數(shù)庫(kù)的 isDuringDate 函數(shù)來(lái)實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法實(shí)例分析
這篇文章主要介紹了JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法,結(jié)合實(shí)例形式分析了javascript類數(shù)組對(duì)象的功能,以及類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的相關(guān)方法與實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07
新手快速學(xué)習(xí)JavaScript免費(fèi)教程資源匯總
這篇文章主要介紹了新手快速學(xué)習(xí)JavaScript免費(fèi)教程資源匯總,都是非常不錯(cuò)的學(xué)習(xí)站點(diǎn),有需要的小伙伴可以參考下。2015-06-06

