zoukankan      html  css  js  c++  java
  • bootstrap使用之多个弹窗和拖动效果[开发篇]

        有时开发一些特效,自己感觉挺爽的,像操作自己电脑一样操作你的网页,这里就介绍一个使用bootstrap的一点多窗口和拖动效果吧!

        这里,我们不使用静态打开的的方式,low...,1、添加一个a链接 触发,打开按钮;2、编写动态打开js脚本; 3、编写modal中间内容;4、添加拖动效果;5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));

        1、添加一个a链接 触发,打开按钮:

        

    <a href="javascript:;" title="开关" class="open-modal-dynamic" url="index.php?m=index&c=cc&a=aa&id=22" alert='1' divid="editModal">打开modal<a>
    <div id="addModal" class="modal hide fade" style="max-800px;" data-backdrop="static"></div>    <!-- 打开容器 -->
    

      

         2、编写动态打开js脚本:

        //打开弹窗
            $('.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){
                        //禁止选择文字,在拖动时会有影响
                        $('html').off('selectstart').on('selectstart', function(){return false;});
                        $('#' + modalId).html(data.htmlData);
                        $('#' + modalId).modal({'show':true});
                    }else{
                        alert(data.info);
                    }
                }, 'json');    
    

         3、编写modal中间内容:

    <style>
        .line{margin-bottom: 5px;}
        .line .left{ 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="关闭小窗口" 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="的时间">
                <input class="Wdate ipt date-picker" style=" 100px;margin: 0;" type="text"  id="date_add"  value=""  />
            </span>
        </div>
        <div class="line" title="设置">
            <span class="left">是否停止:</span>
            <span>
                <label><input type="radio" name="is_del_add" value="1"  />强制停止</label>
                <label><input type="radio" name="is_del_add" value="0" />正常处理</label>
            </span>
        </div>
        <div class="line" title="按照实际情况允许进行模拟更改">
            <span class="left">执行情况:</span>
            <span>
                <label><input type="radio" name="status_add" value="5" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />11</label>
                <label><input type="radio" name="status_add" value="1" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" />22成</label>
                <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="2"/>223行</label>
                <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="0" />445</label>
                <label><input type="radio" onclick="javascript:return confirm('你确定要操作该状态吗,这是系统的操作,请确认?');" name="status_add" value="4"   />55失败</label>
            </span>
        </div>
        <div class="line">
            <span>操作说明:</span>
            <textarea name="memo" id="memo" cols="100" rows="1" style="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">关闭</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('请填写操作备注,如不处理,请直接关闭对话框!');
                    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、添加拖动效果:

    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值,此处即为添加多窗口时的效果使用
            $("#" + 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 () {       //关闭时打开选中
                $('html').off('selectstart').on('selectstart', function () {
                    return true;
                });
            });
    
        }
    }
    

         5、打开多个modal , 调用dragModal(new Array('modalId1','modalId2'));

        整个过程即是如此,有需要的,就参考参考吧!

  • 相关阅读:
    POJ 1681 Painter's Problem(高斯消元法)
    HDU 3530 Subsequence(单调队列)
    HDU 4302 Holedox Eating(优先队列或者线段树)
    POJ 2947 Widget Factory(高斯消元法,解模线性方程组)
    HDU 3635 Dragon Balls(并查集)
    HDU 4301 Divide Chocolate(找规律,DP)
    POJ 1753 Flip Game(高斯消元)
    POJ 3185 The Water Bowls(高斯消元)
    克琳:http://liyu.eu5.org
    WinDbg使用
  • 原文地址:https://www.cnblogs.com/yougewe/p/4962430.html
Copyright © 2011-2022 走看看