精华内容
下载资源
问答
  • jQuery可拖拽对话框弹出代码,支持拖拽,自定义弹出层回调,自定义弹出层内容,标题文字等
  • jQuery弹出提示框,手机端提示框代码代码结构1. 引入CSS2. 引入JS3. HTML代码$(function(){$('#demo1').on('click', function(){webToast("恭喜您,修改成功恭喜您,修改成功恭喜您修改成功恭喜您","middle",3000);}...

    特效描述:jQuery 适用于手机端 弹出提示框。jQuery弹出提示框,手机端提示框代码

    代码结构

    1. 引入CSS

    2. 引入JS

    3. HTML代码

    $(function(){

    $('#demo1').on('click', function(){

    webToast("恭喜您,修改成功恭喜您,修改成功恭喜您修改成功恭喜您","middle",3000);

    });

    $('#demo2').on('click', function(){

    popTipShow.alert('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等', ['知道了'],

    function(e){

    //callback 处理按钮事件

    var button = $(e.target).attr('class');

    if(button == 'ok'){

    //按下确定按钮执行的操作

    //todo ....

    this.hide();

    }

    }

    );

    });

    $('#demo3').on('click', function(){

    popTipShow.confirm('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等',['确 定','取 消'],

    function(e){

    //callback 处理按钮事件

    var button = $(e.target).attr('class');

    if(button == 'ok'){

    //按下确定按钮执行的操作

    //todo ....

    this.hide();

    setTimeout(function() {

    webToast("操作成功","top", 2000);

    }, 300);

    }

    if(button == 'cancel') {

    //按下取消按钮执行的操作

    //todo ....

    this.hide();

    setTimeout(function() {

    webToast("您选择“取消”了","bottom", 2000);

    }, 300);

    }

    }

    );

    });

    $('#demo4').on('click', function(){

    var html = "姓名:";

    popTipShow.confirm('弹窗标题',html,['确 定','取 消'],

    function(e){

    //callback 处理按钮事件

    var button = $(e.target).attr('class');

    if(button == 'ok'){

    if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

    webToast("姓名不能为空!","bottom", 3000);

    return;

    }

    this.hide();

    setTimeout(function() {

    webToast($(".confirm_input").val(),"bottom", 3000);

    }, 300);

    //按下确定按钮执行的操作

    //todo ....

    }

    if(button == 'cancel') {

    //按下取消按钮执行的操作

    //todo ....

    this.hide();

    setTimeout(function() {

    webToast("您选择“取消”了","top", 2000);

    }, 300);

    }

    }

    );

    });

    });

    toast
    alert
    confirm
    confirm+input
    展开全文
  • JS 弹出jquery 弹出

    千次阅读 2019-01-09 11:36:40
    JS 弹出jquery 弹出
                   

    几种皮肤式样

     

     

     

     

     

    功能:

    Js代码 复制代码  收藏代码
    1. //1. 传入字符串   
    2. art.dialog({   
    3.     content: '我支持HTML'  
    4. });  
    //1. 传入字符串art.dialog({    content: '我支持HTML'});
     

    效果:

     

     

    Js代码 复制代码  收藏代码
    1. /*2. 传入HTMLElement  
    2. 备注:1、元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框,会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复 
    3. */  
    4. art.dialog({   
    5.     content: document.getElementById('demoCode_content_DOM'),   
    6.     id: 'EF893L'  
    7. });  
    /*2. 传入HTMLElement备注:1、元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框,会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复*/art.dialog({    content: document.getElementById('demoCode_content_DOM'),    id: 'EF893L'});

     效果:把指定的div加载到这个弹框上

     

     

    Js代码 复制代码  收藏代码
    1. //标题 [title]   
    2. art.dialog({   
    3.     title: 'hello world!'  
    4. });  
    //标题 [title]art.dialog({    title: 'hello world!'});

      效果:

     

     

    Js代码 复制代码  收藏代码
    1. /*确定取消按钮 [ok & cancel]  
    2. 备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭*/  
    3. art.dialog({   
    4.     content: '如果定义了回调函数才会出现相应的按钮',   
    5.     ok: function () {   
    6.         this.title('3秒后自动关闭').time(3);   
    7.         return false;   
    8.     },   
    9.     cancelVal: '关闭',   
    10.     cancel: true //为true等价于function(){}  
    11. });  
    /*确定取消按钮 [ok & cancel]备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭*/art.dialog({    content: '如果定义了回调函数才会出现相应的按钮',    ok: function () {     this.title('3秒后自动关闭').time(3);        return false;    },    cancelVal: '关闭',    cancel: true //为true等价于function(){}});
     

      效果:

     

    Js代码 复制代码  收藏代码
    1. /*自定义按钮 [button]  
    2. 备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭;button参数对应的扩展方法名称也是"button"*/  
    3. art.dialog({   
    4.     id: 'testID',   
    5.     content: 'hello world!',   
    6.     button: [   
    7.         {   
    8.             name: '同意',   
    9.             callback: function () {   
    10.                 this.content('你同意了').time(2);   
    11.                 return false;   
    12.             },   
    13.             focus: true  
    14.         },   
    15.         {   
    16.             name: '不同意',   
    17.             callback: function () {   
    18.                 alert('你不同意')   
    19.             }   
    20.         },   
    21.         {   
    22.             name: '无效按钮',   
    23.             disabled: true  
    24.         },   
    25.         {   
    26.             name: '关闭我'  
    27.         }   
    28.     ]   
    29. });  
    /*自定义按钮 [button]备注:回调函数this指向扩展接口,如果返回false将阻止对话框关闭;button参数对应的扩展方法名称也是"button"*/art.dialog({    id: 'testID',    content: 'hello world!',    button: [        {            name: '同意',            callback: function () {                this.content('你同意了').time(2);                return false;            },            focus: true        },        {            name: '不同意',            callback: function () {                alert('你不同意')            }        },        {            name: '无效按钮',            disabled: true        },        {            name: '关闭我'        }    ]});

        效果:  

     

    Js代码 复制代码  收藏代码
    1. //定时关闭的消息 [time]   
    2. art.dialog({   
    3.     time: 2,   
    4.     content: '两秒后关闭'  
    5. });  
    //定时关闭的消息 [time]art.dialog({    time: 2,    content: '两秒后关闭'});
     

      效果:  

     

     

    Js代码 复制代码  收藏代码
    1. /*定义消息图标 [icon]  
    2. 请查看skin/icons目录下的图标*/  
    3. art.dialog({   
    4.     icon: 'succeed',   
    5.     content: '我可以定义消息图标哦'  
    6. });  
    /*定义消息图标 [icon]请查看skin/icons目录下的图标*/art.dialog({    icon: 'succeed',    content: '我可以定义消息图标哦'});
     

     

      效果:

     

     

    Js代码 复制代码  收藏代码
    1. //锁屏 [lock & background & opacity]   
    2. art.dialog({   
    3.     lock: true,   
    4.     background: '#600'// 背景色  
    5.     opacity: 0.87,  // 透明度   
    6.     content: '中断用户在对话框以外的交互,展示重要操作与消息',   
    7.     icon: 'error',   
    8.     ok: function () {   
    9.         art.dialog({content: '再来一个锁屏', lock: true});   
    10.         return false;   
    11.     },   
    12.     cancel: true  
    13. });  
    //锁屏 [lock & background & opacity]art.dialog({    lock: true,    background: '#600', // 背景色    opacity: 0.87, // 透明度    content: '中断用户在对话框以外的交互,展示重要操作与消息',    icon: 'error',    ok: function () {        art.dialog({content: '再来一个锁屏', lock: true});        return false;    },    cancel: true});
     

     

      效果:这是个锁屏的你可自定义背景颜色和图标等等一些属性

     

     

    Js代码 复制代码  收藏代码
    1. //自定义坐标 [left & top]   
    2. art.dialog({   
    3.     left: 100,   
    4.     top: '60%',   
    5.     content: '我改变坐标了'  
    6. });  
    //自定义坐标 [left & top]art.dialog({    left: 100,    top: '60%',    content: '我改变坐标了'});
     

      效果:

     

    Js代码 复制代码  收藏代码
    1. //创建一个全屏对话框   
    2. art.dialog({   
    3.     width: '100%',   
    4.     height: '100%',   
    5.     left: '0%',   
    6.     top: '0%',   
    7.     fixed: true,   
    8.     resize: false,   
    9.     drag: false  
    10. })  
    //创建一个全屏对话框art.dialog({    width: '100%',    height: '100%',    left: '0%',    top: '0%',    fixed: true,    resize: false,    drag: false})

     效果:

     

    Js代码 复制代码  收藏代码
    1. //右下角滑动通知   
    2. artDialog.notice = function (options) {   
    3.     var opt = options || {},   
    4.         api, aConfig, hide, wrap, top,   
    5.         duration = 800;   
    6.            
    7.     var config = {   
    8.         id: 'Notice',   
    9.         left: '100%',   
    10.         top: '100%',   
    11.         fixed: true,   
    12.         drag: false,   
    13.         resize: false,   
    14.         follow: null,   
    15.         lock: false,   
    16.         init: function(here){   
    17.             api = this;   
    18.             aConfig = api.config;   
    19.             wrap = api.DOM.wrap;   
    20.             top = parseInt(wrap[0].style.top);   
    21.             hide = top + wrap[0].offsetHeight;   
    22.                
    23.             wrap.css('top', hide + 'px')   
    24.                 .animate({top: top + 'px'}, duration, function () {   
    25.                     opt.init && opt.init.call(api, here);   
    26.                 });   
    27.         },   
    28.         close: function(here){   
    29.             wrap.animate({top: hide + 'px'}, duration, function () {   
    30.                 opt.close && opt.close.call(this, here);   
    31.                 aConfig.close = $.noop;   
    32.                 api.close();   
    33.             });   
    34.                
    35.             return false;   
    36.         }   
    37.     };     
    38.        
    39.     for (var i in opt) {   
    40.         if (config[i] === undefined) config[i] = opt[i];   
    41.     };   
    42.        
    43.     return artDialog(config);   
    44. };   
    45. //调用示例:   
    46. art.dialog.notice({   
    47.     title: '万象网管',   
    48.     width: 220,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能//导致artDialog收缩  
    49.     content: '尊敬的顾客朋友,您IQ卡余额不足10元,请及时充值',   
    50.     icon: 'face-sad',   
    51.     time: 5   
    52. });  
    //右下角滑动通知artDialog.notice = function (options) {    var opt = options || {},        api, aConfig, hide, wrap, top,        duration = 800;            var config = {        id: 'Notice',        left: '100%',        top: '100%',        fixed: true,        drag: false,        resize: false,        follow: null,        lock: false,        init: function(here){            api = this;            aConfig = api.config;            wrap = api.DOM.wrap;            top = parseInt(wrap[0].style.top);            hide = top + wrap[0].offsetHeight;                        wrap.css('top', hide + 'px')                .animate({top: top + 'px'}, duration, function () {                    opt.init && opt.init.call(api, here);                });        },        close: function(here){            wrap.animate({top: hide + 'px'}, duration, function () {                opt.close && opt.close.call(this, here);                aConfig.close = $.noop;                api.close();            });                        return false;        }    };         for (var i in opt) {        if (config[i] === undefined) config[i] = opt[i];    };        return artDialog(config);};//调用示例:art.dialog.notice({    title: '万象网管',    width: 220,// 必须指定一个像素宽度值或者百分比,否则浏览器窗口改变可能//导致artDialog收缩    content: '尊敬的顾客朋友,您IQ卡余额不足10元,请及时充值',    icon: 'face-sad',    time: 5});

     

     

     

    Js代码 复制代码  收藏代码
    1. //跨域访问   
    2. //跨域访问无法自适应大小,也无法进行父页面与子页面数据交换   
    3. art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',   
    4.     {title: '人人网', width: 320, height: 400});  
    //跨域访问//跨域访问无法自适应大小,也无法进行父页面与子页面数据交换art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',    {title: '人人网', width: 320, height: 400});

     

     

     

    Js代码 复制代码  收藏代码
    1. //加载googleMAP   
    2. art.dialog.open('googleMaps.html');  
    //加载googleMAPart.dialog.open('googleMaps.html');
     

     

     

     

    换皮肤只要换上下面图片上的css文件名就可以

     


    ****************************************************************
    用法
    1.导入

    Html代码 复制代码  收藏代码
    1. <script src="artDialog/artDialog.js?skin=default"></script>  
    <script src="artDialog/artDialog.js?skin=default"></script>

    2.加上

    Js代码 复制代码  收藏代码
    1. (function (config) {   
    2.     config['lock'] = true;   
    3.     config['fixed'] = true;   
    4.     config['okVal'] = 'Ok';   
    5.     config['cancelVal'] = 'Cancel';   
    6.     // [more..]   
    7. })(art.dialog.defaults);//这个是用哪个主题有很多主题的你把名字打上就行啦  
    (function (config) {    config['lock'] = true;    config['fixed'] = true;    config['okVal'] = 'Ok';    config['cancelVal'] = 'Cancel';    // [more..]})(art.dialog.defaults);//这个是用哪个主题有很多主题的你把名字打上就行啦
     

    googleMap的代码

    Js代码 复制代码  收藏代码
    1. <!doctype html>   
    2. <html>   
    3.     <head>   
    4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
    5.     <style>   
    6. html { height: 100% }   
    7. body { height: 100%; margin: 0; padding: 0; background-color: #FFF }  
    8. #map_canvas { height: 100% }   
    9. </style>   
    10.     <script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=zh_CN"></script>   
    11.     <script>    
    12.         var map, geocoder;   
    13.         function initialize() {   
    14.             var latlng = new google.maps.LatLng(39.904214, 116.407413);   
    15.             var options = {   
    16.                 zoom: 11,   
    17.                 center: latlng,   
    18.                 disableDefaultUI: true,   
    19.                 panControl: true,   
    20.                 zoomControl: true,   
    21.                 mapTypeControl: true,   
    22.                 scaleControl: true,   
    23.                 streetViewControl: false,   
    24.                 overviewMapControl: true,   
    25.                 mapTypeId: google.maps.MapTypeId.ROADMAP   
    26.             };   
    27.             map = new google.maps.Map(document.getElementById("map_canvas"), options);   
    28.             geocoder = new google.maps.Geocoder();   
    29.             geocoder.geocode({latLng: latlng}, function(results, status) {   
    30.                 if (status == google.maps.GeocoderStatus.OK) {   
    31.                     if (results[3]) {   
    32.                         document.getElementById("map_address").value = results[3].formatted_address;   
    33.                     }   
    34.                 }   
    35.             });   
    36.                
    37.             var dialog = art.dialog.open.api;   
    38.             dialog.title('google mpas')   
    39.             .size(558, 360)   
    40.             .button({name: '截图', callback: function () {   
    41.                 var center = map.getCenter().lat() + ',' + map.getCenter().lng(),   
    42.                     zoom = map.getZoom(),   
    43.                     maptype = map.getMapTypeId(),   
    44.                     url = 'http://maps.googleapis.com/maps/api/staticmap';   
    45.                     url += '?center=' + encodeURIComponent(center);   
    46.                     url += '&zoom=' + encodeURIComponent(zoom);   
    47.                     url += '&size=558x360';   
    48.                     url += '&maptype=' + encodeURIComponent(maptype);   
    49.                     url += '&markers=' + encodeURIComponent(center);   
    50.                     url += '&language=zh_CN';   
    51.                     url += '&sensor=false';   
    52.                    
    53.                 art.dialog.through({title: false, content: '<img src="' + url + '" />', padding: 0, width: 558, height: 360, lock: true});   
    54.                    
    55.                 return false;   
    56.             }, focus: true})   
    57.             .position('50%''goldenRatio');   
    58.                
    59.             document.getElementById("map-search-sumbit").onclick = function () {   
    60.                 var input = document.getElementById('map_address');   
    61.                 search(input.value);   
    62.             };   
    63.         }   
    64.         function search(address) {   
    65.             if (!map) return;   
    66.             geocoder.geocode({address : address}, function(results, status) {   
    67.                 if (status == google.maps.GeocoderStatus.OK) {   
    68.                     map.setZoom(11);   
    69.                     map.setCenter(results[0].geometry.location);   
    70.                     var marker = new google.maps.Marker({   
    71.                         map: map,   
    72.                         position: results[0].geometry.location   
    73.                     });   
    74.                 } else {   
    75.                     alert("Invalid address: " + address);   
    76.                 }   
    77.             });   
    78.         }   
    79.     </script>   
    80.     </head>   
    81.     <body onLoad="initialize();" style="font: 12px/1.11 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti; _font-family:Tahoma,Arial,Helvetica,STHeiti; -o-font-family: Tahoma, Arial;">   
    82.     <div style="width:100%; height:100%">   
    83.       <table style="width:100%;height:100%;">   
    84.         <tr>   
    85.           <td style="height:38px"><div style="margin:5px;">地址:  <input id="map_address"  value="" style="width:200px; padding:4px;"> <button id="map-search-sumbit">搜 索</button></div></td>   
    86.         </tr>   
    87.         <tr>   
    88.           <td style="height:100%"><div id="map_canvas" style="height:100%; margin:0 5px"></div></td>   
    89.         </tr>   
    90.       </table>   
    91.     </div>   
    92. </body>   
    93. </html>  
               

    再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

    展开全文
  • HTML代码 代码如下:’pop-div’ xss=removed class=”pop-box”> 标题位置</h4> ”pop-box-body”> <p> 正文内容 </p> </div> ’buttonPanel’ xss=removed xss=removed> <input value=”Close” id=”btn1″ ...
  • 今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出。 效果图如下: 鼠标悬浮前: 鼠标悬浮后: html代码如下: <ul class="e3"> ...

    今天给客户制作的网站里面加个效果,当鼠标在列表图片之外时,标题不显示,当鼠标悬浮在图片之上时,标题从底部弹出。

    效果图如下:

    鼠标悬浮前:

    鼠标悬浮后:

     

    html代码如下:

    <ul class="e3">
    	<li>
            <a href="#">
                <img src="./1_131031084533_1.jpg" border="0" width="824" height="94" alt="长城外景基地">
                <span class="title" style="display: none; ">
                    <font class="font1">SHOWCASE TIME<br>长城外景基地</font>
                </span>
            </a>
        </li>
    	<li>
        	<a href="#">
            	<img src="./1_131031084327_1.jpg" border="0" width="824" height="94" alt="白鹭岛">
                <span class="title" style="display: none; ">
                	<font class="font1">SHOWCASE TIME<br>白鹭岛</font>
                </span>
           	</a>
        </li>
    </ul>
    

      

    jquery代码如下:

    <script type="text/javascript">
    $(document).ready(function(){
      $('.e3 li').mouseover(function(){
      $(this).find('.title').stop(true,true).slideDown();//you can give it a speed
      });
      $('.e3 li').mouseleave(function(){
      $(this).find('.title').stop(true,true).slideUp();
      });
      
      
    });
    </script>
    

     

    里面在slideDown和slideUp前面加 stop(true,true) 因为事件的执行有一定延迟,当快速进行把鼠标在图片上悬浮和取消悬浮的操作时,一旦停止下来,事件却没有执行完毕。加后明显改善效果。

    转载于:https://www.cnblogs.com/shanmao/p/3459833.html

    展开全文
  • jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框;它可以设置对话框的标题、内容,并且使对话框可以拖动、调整大小、及关闭;平常主要用来替代浏览嚣自带的alert、confirm、open...
  • 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用。...
  • "jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果,可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。
  • jQuery可拖拽对话框弹出代码,支持拖拽,自定义弹出层回调,自定义弹出层内容,标题文字等
  • jQuery弹出窗口完整代码

    千次阅读 2015-01-08 14:56:49
    参考: http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html,  稍作整理如下: jQuery弹出窗口 .window{ width:400px; background-color:#d0def0; position:absolute; padding:2px; mar

    参考: http://www.cnblogs.com/jihua/archive/2012/10/08/2715175.html, 

    另外一个类似的, 带步骤确认的窗口:http://keleyi.com/keleyi/phtml/jquery/1.htm


    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery弹出窗口</title>
    <style type="text/css">
    .window{
        width:400px;
        background-color:#d0def0;
        position:absolute;
        padding:2px;
        margin:5px;
        display:none;
        }
    .content{
        height:200px;
        background-color:#FFF;
        font-size:14px;
        overflow:auto;
        }
    .win_title{
    	padding:2px;
    	color:#0CF;
    	font-size:14px;
    	}
    .win_title img{
    	float:right;
    	}
    </style>
    <script type="text/javascript" src="http://s0.qhimg.com/lib/jquery/183.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#btn_center").click(function () {
                popCenterWindow();
            });
    
            $("#btn_right").click(function () {
                popRightWindow();
            });
            $("#btn_left").click(function () {
                popLeftWindow();
            });
        });
    
    </script>
    </head>
    <body>
    	 <div style="width:600px;margin-left:auto;margin-right:auto;margin-top:160px;">
    		<input type="button" value="居中窗口" id="btn_center" />
    		<input type="button" value="居左下角" id="btn_left" />
    		<input type="button" value="居右下角" id="btn_right" />
    	</div>
    	
    	<div class="window" id="center">
    		<div id="title" class="win_title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />窗口标题 - center</div>
    		<div class="content">www.google.cn</div>
    	</div>
    
    	<div class="window" id="left">
    		<div id="title2" class="win_title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />窗口标题 - left</div>
    		<div class="content">www.baidu.com</div>
    	</div>
    
    	<div class="window" id="right">
    		<div id="title3" class="win_title"><img src="http://pic002.cnblogs.com/images/2012/451207/2012100814082487.jpg" alt="关闭" />窗口标题 - right</div>
    		<div class="content">www.qq.com</div>
    	</div>
    
    	<script type="text/javascript">
    		//获取窗口的高度
    		var windowHeight;
    		//获取窗口的宽度
    		var windowWidth;
    		//获取弹窗的宽度
    		var popWidth;
    		//获取弹窗高度
    		var popHeight;
    		function init() {
    		   windowHeight=$(window).height();
    		   windowWidth=$(window).width();
    		   popHeight=$(".window").height();
    		   popWidth=$(".window").width();
    		}
    
    		//关闭窗口的方法
    		function closeWindow(){
    			$(".win_title img").click(function(){
    				$(this).parent().parent().hide("normal");
    			});
    		}
    		
    		function popCenterWindow(){
    			init();
    			//计算弹出窗口的左上角Y的偏移量
    			var popY=(windowHeight-popHeight)/2; //垂直方向偏移量
    			var popX=(windowWidth-popWidth)/2;   //水平方向偏移量
    			
    			//设定窗口的位置
    			$("#center").css("top",popY).css("left",popX).slideToggle("fast");
    			closeWindow();
    		}
    		
    		function popLeftWindow(){
    			init();
    			//计算弹出窗口的左上角Y的偏移量
    			var popY=windowHeight-popHeight;
    			//var popX=-(windowWidth-popWidth);
    			
    			//设定窗口的位置
    			$("#left").css("top",popY-50).css("left",50).slideToggle("slow");
    			closeWindow();
    		}
    		function popRightWindow() {
    			init();
    			//计算弹出窗口的左上角Y的偏移量
    			var popY=windowHeight-popHeight;
    			var popX=windowWidth-popWidth;
    			
    			//设定窗口的位置
    			$("#right").css("top",popY-50).css("left",popX-50).slideToggle("normal");
    			closeWindow();
    		}
    	</script>
    </body>
    </html>


    展开全文
  • 设置了五个参数title、 content、width、height、cssName,它们分别定义了层标题、层内内容、层宽、层高、层内容的样式名。层内内容又设置了url、 text、id、iframe四种加载方式,通过ajax以get或post加载目标url的...
  • jquery.dialog.js 是jquery 最经典的弹出框插件,简单易用,亲测可用,附案例代码
  • [align=center][size=xx-large]wBox轻量级的弹出窗口jQuery插件[/size][/align] jQuery插件wBox 1.0正式发布——经过一系列的wBox需求分析,进行了wBox的代码重构,去除了一些鸡肋的功能~根据公司项目的需要进行...
  • tekitizy_carousel是一款jquery响应式弹出层图片画廊插件。该弹出层图片画廊可以将页面中所有带相同class类的图片制作为一个无限循环的旋转木马效果。它的特点还有: 完全响应式。 通过图片的alt标签来设置标题。 ...
  • JQ鼠标经过标题向上弹出特效是一款基于jquery+css3实现的点击左右箭头可移动左右滚动图片特效。
  • 转载和积累系列 - Jquery 弹出代码

    千次阅读 2012-08-15 20:11:08
    /* * 弹出层 JS * 使用方法: * var popups = new popus(); * popups.init({ * trigger:"popup_open", //触发的元素或id,必填参数 * popupBlk:"popup", //弹出内容层元素或id,必填参数 *
  • Javascript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个Javascript事件时才通过修改css的属性值来将其显示出来。 其大致步骤为: •创建一个装载弹出窗口的div 复制代码...
  • colorbox 弹出jquery

    千次阅读 2011-09-27 11:36:58
    这可以为Colorbox设置一个标题 rel false This can be used as an anchor rel alternative for ColorBox. This allows the user to group any combination of elements together ...
  • 接下来就是jQuery代码了,也是比较基础的: $(document).ready(function(){ $("#button").click(function(){ $("#zhedang").fadeIn(100); $("#tanchu").slideDown(200); }); $(".close").click(function...
  • 可设置标题与内容弹出层js特效是一款jQuery弹出层插件制作的可设置标题与内容的弹框代码
  • 2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放了 3、支持缩略图和按钮帮助导航 4、弹出框支持显示多种类型的内容(图片,html,视频……) 请下载demo中的文件...
  • 不错的jQuery弹出层对话框插件,目前几个项目都在用,调用方便很实用,方便扩展; 对话框标题可自由拖动; 边框支持多浏览器半透明; 支持半遮罩背景设置; 支持回调函数使用; 传参方便,一行代码搞定调用,希望能...
  • 插件描述:fancyBox是一款优秀的弹出Jquery插件。 特点 1、允许我们用鼠标和键盘上的四个方向键切换图片 2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时,将会看到弹出框自动缩放...
  • 内容索引:脚本资源,Ajax/JavaScript,弹出框,自动关闭 wBox ,基于jQuery1.4.2的一个弹出框插件,与其它不同的是,它可以自动关闭,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入...
  • 该特效“不但可以让你的 title 提示效果变得美观,而且可以显示你将要点击的链接的 ...jQuery代码,另存为JS或者整合: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 jQuery(docum
  • 具体如下:这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码、JavaScript代码和HTML三者结合...
  • 内容索引:脚本资源,jQuery,弹出层,JQuery插件 JQuery 弹出层插件 PopupDiv-v1.0,弹出后可自动居中,可自定义标题栏和关闭按钮,支持半透明状态,支持鼠标拖动,支持自定义弹出样式,支持ajax加载页面到弹出层,带...
  • jquery插件封装:弹出div对话框

    千次阅读 2016-06-17 15:29:40
    以前封装了一个Div弹出jquery插件, jQuery特效之浮动div模式框,这个插件封装的原则追求最简洁,只负责弹出的行为,不负责样式。 而这次的封装是基于上个插件的封装进行进一步的封装,封装一个完整的浮动div弹出...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,864
精华内容 3,945
关键字:

弹出标题的jquery代码