HTML 实现弹窗

1、ColorBox弹窗

可使用CDN:http://cdn.bootcss.com/jquery.colorbox/1.6.4/jquery.colorbox-min.js

【说明文档URL】 【基本功能demo】

 // 引入jquery核心库和ColorBox脚本文件 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
 <script src="../colorbox/jquery.colorbox.js"></script>

 // 引入ColorBox样式表文件,注意引入不同皮肤的css文件将实现不同的皮肤 
 <link media="screen" rel="stylesheet" href="colorbox.css" />

 // 实现方式:
 $("#show_img").colorbox({rel:'show_img'});

2、blockUI弹窗

引入:http://malsup.github.io/jquery.blockUI.js

【说明文档URL】 【Github】 【基本功能demo】

 // 基本实现方式:
 // 只显示出来:$.blockUI();
 // 解锁blockUI:$.unblockUI();
 // 显示文本或div:$.blockUI({ message: $('#domMessage') });
 // $.blockUI({ message: '\<h1>\<img src="busy.gif" /> Just a moment...\</h1>' });
 // 更改blockUI的显示样式:
 $.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });

例子:

<scripttype="text/javascript">

// 当ajax执行完成之后停止blockUI;
$(document).ajaxStop($.unblockUI); 
//带有ajax的函数
functiontest() { 
    $.ajax({ url: 'wait.php', cache: false }); 
} 
$(document).ready(function() { 
  $('#pageDemo1').click(function() { 
   $.blockUI(); //直接显示
   test(); 
}); 
$('#pageDemo2').click(function() {
    //显示图片
    $.blockUI({ message: "<h1><img src="busy.gif" /> Just a moment...</h1>" });
    test(); 
}); 
$('#pageDemo3').click(function() { 
    //更改背景
    $.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } }); 
    test(); 
}); 
$('#pageDemo4').click(function() { 
    $.blockUI({ message: $('#domMessage') });
    //显示div文本
    test(); 
}); 

<div id="domMessage" style="display:none;">
     <h1>We are processing your request.  Please be patient.</h1>
</div>

对指定区域的操作:

<scripttype="text/javascript">
    $(document).ready(function() {
        //使用blockUI直接对指定区域覆盖
        $('#blockButton').click(function() { 
        $('div.test').block({ message: null }); 
    }); 
    //对指定区域覆盖并显示信息和更改背景颜色
    $('#blockButton2').click(function() { 
        $('div.test').block({ 
            message: '<h1>Processing</h1>', 
            css: { border: '3px solid #a00' } 
        }); 
    }); 
    //解锁指定区域的blockUI
    $('#unblockButton').click(function() { 
        $('div.test').unblock(); 
    }); 
}); 

显示简单对话框:

$(document).ready(function(){ 
    $('#test').click(function(){ 
        $.blockUI({ message: $('#question'), css: { width: '275px' }
    }); 
    $('#yes').click(function(){  // update the block message 
        $.blockUI({ message: "<h1>Remote call in progress...</h1>" }); 
        $.ajax({ 
            url: 'wait.php', 
            cache: false, 
            complete: function(){  // unblock when remote call returns 
                $.unblockUI(); 
            } 
        }); 
    }); 
    $('#no').click(function(){ 
        $.unblockUI(); 
        returnfalse; 
    }); 
 }); 
<input id="test" type="submit"value="Show Dialog" />
<div id="question" style="display:none; cursor: default">
    <h1>Would you like to contine?.</h1>
    <input type="button" id="yes"value="Yes" />
    <input type="button" id="no"value="No" />
</div>

发表评论

Blue Captcha Image
Refresh

*