使用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、編寫(xiě)動(dòng)態(tài)打開(kāi)js腳本; 3、編寫(xiě)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、編寫(xiě)動(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、編寫(xiě)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í)顚?xiě)操作備注,如不處理,請(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)教程
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
這篇文章主要介紹了JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用場(chǎng)景與使用區(qū)別的介紹,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實(shí)現(xiàn)示例
很多時(shí)候,跟后端接口開(kāi)發(fā)對(duì)接時(shí),因?yàn)樾枨蟮年P(guān)系,需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對(duì)應(yīng),有時(shí)候需要的是多維數(shù)據(jù),這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實(shí)現(xiàn)示例,感興趣的可以了解一下2021-12-12微信小程序?qū)崿F(xiàn)上傳多個(gè)文件 超過(guò)10個(gè)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)上傳多個(gè)文件,超過(guò)10個(gè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02MATLAB中fillmissing函數(shù)用法小結(jié)
這篇文章主要介紹了MATLAB中fillmissing函數(shù)用法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09Js實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證實(shí)例代碼
這篇文章主要介紹了Js實(shí)現(xiàn)中國(guó)公民身份證號(hào)碼有效性驗(yàn)證實(shí)例代碼,可以識(shí)別身份證號(hào)碼的正確性,有興趣的可以了解一下2017-05-05for 循環(huán)性能比較 提高for循環(huán)的效率
性能有較大的區(qū)別嗎,有必要采取這種寫(xiě)法嗎2009-03-03JavaScript高級(jí)程序設(shè)計(jì) 錯(cuò)誤處理與調(diào)試學(xué)習(xí)筆記
JavaScript高級(jí)程序設(shè)計(jì) 錯(cuò)誤處理與調(diào)試學(xué)習(xí)筆記,學(xué)習(xí)js的朋友可以參考下。2011-09-09JavaScript異步編程的干貨知識(shí)點(diǎn)分享
異步是什么意思?如何實(shí)現(xiàn)異步編程?不同的異步模式有哪些?本文將圍繞這些問(wèn)題和大家分享JavaScript異步編程中的重要知識(shí)點(diǎn),需要的可以學(xué)習(xí)一下2023-06-06點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)
下面小編就為大家?guī)?lái)一篇點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡(jiǎn)單js代碼(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06