精华内容
下载资源
问答
  • 美化JS弹窗

    2012-11-27 13:20:08
    美化了原有的弹窗,做成类似凡客诚品的alert,confirm弹出窗样式,下载后修改即可使用。
  • 关于js弹窗美化

    千次阅读 2018-07-13 17:09:31
    今天研究了一下js弹窗美化下面请看图有详细注释:这是创建元素下面要定义一个修改样式的方法:cssobj亲前面的参数是元素然后就是增加样式了:样式增加完成后就要把样式互相嵌套让它成为一个弹窗:这样还没完还要添加...

    今天研究了一下js的弹窗美化下面请看图有详细注释:

    这是创建元素下面要定义一个修改样式的方法:

    cssobj亲前面的参数是元素然后就是增加样式了:

    样式增加完成后就要把样式互相嵌套让它成为一个弹窗:

    这样还没完还要添加功能不然它是不会关的:

    最后效果是这样:

                                                                                                   今天分享就到这里 谢谢!!!

    展开全文
  • 虽然我们不能阻止伸手党的行为,但是我们可以做一个提示,这样至少有一定版权认识的人看到了,都会带个原站链接,一般的js复制弹窗是不是觉得很now,这次久伴带给大家的是美化版的复制弹框,效果见本站效果图通用...

    前言后语

    作为站长都不希望自己原创的内容被伸手党无情的搬走,虽然我们不能阻止伸手党的行为,但是我们可以做一个提示,这样至少有一定版权认识的人看到了,都会带个原站链接,一般的js复制弹窗是不是觉得很now,这次久伴带给大家的是美化版的复制弹框,效果见本站

    效果图

    6e4532a72a6e21bbab7327e8bf6f8e44.png

    通用教程

    //在网页底部调用下边的两个静态文件

    //然后添加如下代码

    上面的js和css都是挂载在cdn,有强迫症的可以自己本地化一下

    知更鸟主题教程

    打开主题目录functions.php文件,添加以下代码

    /*js弹窗美好*/

    add_filter('the_content', 'old_content_message');

    function zm_copyright_tips() {

    echo '';

    echo '';

    echo '';

    }

    add_action( 'wp_footer', 'zm_copyright_tips', 100 );

    注意:代码添加OK之后注意刷新网站缓存,有的站点可能有缓存,导致没有效果

    展开全文
  • 美化弹出框

    2018-08-08 11:20:32
    jquery 各种弹出框美化效果jquery 各种弹出框美化效果
  • 原生js写的弹窗效果(alert效果),非常好用,适用于各大主流的浏览器,包括ie、火狐、谷歌、360等
  • js美化alert()弹出框

    千次阅读 2017-07-28 17:59:38
    使用重定义//弹出自定义提示窗口 var showAlert= function(msg,url,element){ //遮罩 if ( $("#cover_alert").length > 0) { //遮罩存在,直接调起 $("#cover_alert").show(); }else{ var coverHtml ='<di

    使用重定义

    //弹出自定义提示窗口
    var showAlert= function(msg,url,element){
        //遮罩
        if ( $("#cover_alert").length > 0) {
            //遮罩存在,直接调起
            $("#cover_alert").show();
        }else{
            var coverHtml ='<div class="cover"  id="cover_alert"  onclick="closeAlert()" style="z-index: 101;"></div>';
            $("body").append(coverHtml);
            $("#cover_alert").show();
        }
         //弹框
        if ( $("#pop_box_alert").length > 0 &&  $("#pop_box_msg").length > 0 ) {
            //存在,则只修改文字
             $('#pop_box_msg').html(msg);
             $("#pop_box_msg").show();
        } else{
            var messageHtml = '<div class="pop_box" id="pop_box_alert" onclick="closeAlert()" style="z-index: 102;">'+
                                                        '<div class="pop_img">'+
                                                            '<img src="/assets/images/front/images/pop_top.png">'+
                                                        '</div>'+
                                                        '<div class="pop_center">'+
                                                            '<p id="pop_box_msg">'+msg+'</p>'+
                                                        '</div>'+
                                                        '<div class="pop_img">'+
                                                            '<img src="/assets/images/front/images/pop_bottom.png">'+
                                                        '</div>'+
                                                    '</div>';
            $("body").append(messageHtml);
        }
         $("#pop_box_alert").show();
        var sVal = arguments[2] ? arguments[2] : 0;
         if(url){
             if(url=='share'){
                 setTimeout("showTip()", 2000 )
             }
             if(url=='list'){
                var rit ='/meeting/list/'+sVal;
                 setTimeout(function(){redirectList(rit)} , 2000 );
             }
         }else{
             setTimeout("$('#pop_box_alert').hide();$('#cover_alert').hide();" , 2000);
         }
    }
    //重定义alert
    //那么重点来了!!!!!!!!!!!!!!!
    window.alert=showAlert;
    //那么重点来了!!!!!!!!!!!!!!!
    //点击遮罩关闭
    function closeAlert(){
        $("#pop_box_alert").hide();
         $("#cover_alert").hide();
    }
    
    //跳转列表页
    function redirectList(url){
        $('#pop_box_alert').hide(); 
        window.location.href=url;
    }
    
    //显示遮罩碳层
    function showTip(element){
        $("#pop_box_alert").hide();
        $("#cover_alert").hide();
        $('#shareZindex').show();
    }

    展开全文
  • js原生alert弹框美化

    万次阅读 2017-07-28 12:01:20
    1、说明通过自定义方式美化弹框,使用alert弹框错误提示2、示例html代码片段:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...

    1、说明

    通过自定义方式美化弹框,使用alert弹框错误提示

    2、示例

    html代码片段:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>welcome</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
        <script type="text/javascript" src="/assets/js/jquery.js"></script>
        <script type="text/javascript" src="/assets/js/front.js?v=1"></script>
        <style type="text/css">
            /*弹窗*/
            div{padding: 0;  margin: 0;}
            .cover{background: rgba(0,0,0,0.64);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 101;}
            .pop_box{width: 74%;margin: 0 auto;position: fixed;top: 30%;left: 50%;margin-left: -37%;z-index: 102;}
            .pop_img img{width: 100%;}
            .pop_center{background: url(/assets/images/img/pop_center.png) no-repeat;min-height: 44px; margin-left: -9px;}
            .pop_center span{text-align: center;font-size: 18px;color: #fff;line-height: 30px; margin-left: 28%;}
        </style>
    </head>
    <body>
        用户名:<input type="text" name="username" id="username" />
        <br /><br />
        性&nbsp;&nbsp;&nbsp;别:<input type="radio" name="sex" value="1" />&nbsp;
                <input type="radio" name="sex" value="2"/>
        <br /><br />
        <input type="button" value="submit" onclick="check();" />
    </body>
    </html>

    front.js

    //弹出自定义提示窗口
    var showAlert= function(msg, url){
        //弹框存在
        if ( $("#alert_box").length > 0) {
            $('#pop_box_msg').html(msg);
        } else {
            var alertHtml = '<div id="alert_box">'
                        +       '<div class="cover"  id="cover_alert"  onclick="closeAlert()"></div>'
                        +       '<div class="pop_box" id="pop_box_alert" onclick="closeAlert()">'
                        +           '<div class="pop_img">'
                        +               '<img src="/assets/images/img/pop_top.png">'
                        +           '</div>'
                        +           '<div class="pop_center">'
                        +               '<span id="pop_box_msg">' + msg + '</span>'
                        +           '</div>'
                        +           '<div class="pop_img">'
                        +               '<img src="/assets/images/img/pop_bottom.png">'
                        +           '</div>'
                        +       '</div>'
                        +   '</div>';
            $("body").append(alertHtml);
        }
        $("#alert_box").show();
        if(url){
             setTimeout(function(){
                window.location.href = url + '?id=' + 10000*Math.random();
             } , 2000 );
        }else{
             setTimeout("$('#alert_box').hide();" , 2000);
        }
    }
    
    //重定义alert
    window.alert=showAlert;
    
    //点击遮罩关闭
    function closeAlert(){
        $("#alert_box").hide();
    }
    
    //验证表单
    function check()
    {
        var username = $.trim($("#username").val());
        if (username.length < 1) {
            alert('用户名不能为空!');
            return false;
        }
        var sex = $('input[name="sex"]:checked').val();
        if (sex.length < 1) {
            alert('性别不能为空!');
            return false;
        }
        alert('提交成功!');
        return true;
    }

    3、效果

    这里写图片描述


    1)本示例使用laravel框架,php语法
    2)弹框样式可根据实际情况自行定义

    展开全文
  • jquery弹窗确认美化窗口代码下载
  • jQuery弹窗(alert,confirm)美化插件,弹窗的一些样式,这个是很常用的,比如我们开发后台程序,往数据库添加内容,是否成功,这时候可以用这样的弹窗,php中文网推荐下载!
  • 手机移动端美化弹窗提示确认框js特效代码.zip 手机移动端美化弹窗提示确认框js特效代码.zip 亲测
  • 一款漂亮的弹窗

    2018-06-10 21:32:29
    flavr是—超级漂亮的jQuery扁平弹出对话框 , 非常好看的弹窗样式和动画
  • 推荐两款好的js弹窗插件

    千次阅读 2015-01-14 15:34:44
    两款不错的js插件:layer jBox
  • 此插件实现在页面弹出多个窗口,且有多款皮肤,(包括类似Win7 的),插件压缩了才几十KB 。
  • 美化弹窗公告源码

    2020-05-05 09:55:27
    源码介绍: 简单好看到爆炸,上传到根目录使用即可,一天只弹一次,使用cookie记录。
  • JS弹出对话框(美化窗体) 很好看的窗体弹出对话框
  • hsycmsAlert.js炫酷弹窗插件,包括了经常用到的确认对话框、loading提示、操作成功、操作失败、自定义弹窗内容、文字提示等。 使用说明: 需要引入两个JS文件:jquery.js 和 hsycmsAlert.js 样式文件: ...
  • 1.设置js弹窗控制器 webView.JsDialogHandler = this; //js弹窗控制 this表示本类对象,所以本类要实现IJsDialogHandler接口 2.实现IJ...
  • var BePrompt = { defaultConfig: { type: 'text', Desc: '', length: 5 }, ... open: function (message, defaultText, ... 采用jq美化系统Prompt提示框,仿照的app输入界面模式,整屏比下向上弹出。  
  • 正如上图你看到的这样,这就是今天要给大家分享的一款JAVASCRIPT弹窗插件—SweetAlert。 SweetAlert是一款纯JS的WEB弹窗插件,不依赖其他任何第三方(如:jQuery等)组件,引用它只需要两个文件,一个SweetAlert的...
  • 很多emlog站长朋友网站都想设置一个杯复制文字然后弹出提醒转载保留原文链接,那么,现在就来为大家为大家分享一下EMLOG复制网站文字后提醒弹窗美化版教程。 一、操作步骤 1、打开模板文件夹中的 footer.php 文件...
  • 弹出框美化 alert样式美化

    万次阅读 多人点赞 2017-01-18 08:37:40
    弹出框美化 alert样式美化
  • 好看的alert弹窗或样式弹窗

    千次阅读 2020-12-21 09:59:01
    好看的alert弹窗或样式弹窗 该样式是我网上搜寻的,风格好看又简洁,不失大雅! 就不过多描述了,自己体验一下吧~:点我体验一番 一、引入js和css文件 1、引入js和css文件 直接在head引入: <link rel=...
  • JQuery Alert Confirm
  • js漂亮弹出层代码

    2012-11-13 08:33:00
    无外部css文件,引用Dialog.js即可使用; 对iframe下的应用作了充分考虑,适合复杂的系统应用; Dialog显示的内容(三种):1、指向一个URL的iframe窗口;2、页面内隐藏的元素中的html内容;3、直接...
  • javascript自定义alert弹窗

    万次阅读 2016-04-10 15:18:46
    我们都知道js中的alert有弹窗提示的作用,但它在实践项目中很少使用,原因就是因为长的太难看!那么今天我就给大家讲一下如何来美化这个系统自带的alert!详细代码如下: <!DOCTYPE html> 教你如何更改网页的默认...
  • js自定义弹出框样式

    2018-01-22 09:26:04
    alert和comfirm,里面有源码,代码复用性很高,如果你不满意我的,也可以适当的修改我的,想用的话,直接下载即可
  • js 精美toast弹出窗

    2021-06-05 17:40:58
    引入pxmu.js pxmu.js是一款超轻量的js弹出层插件。 使用也非常简单,直接引入cdn ...script type="text/javascript" src="https://cdn.jsdelivr.net/gh/shiyueGG/pxmu@1.0.6/pxmu.min.js"></script>
  • 这个组件是用来美化默认的js弹窗的,用它可以方便的弹出相关的信息,包括消息框,删除确认框等
  • jQuery+Bootstrap美化弹出框

    千次阅读 2018-12-05 14:54:30
    项目中很多弹出的警告框是通过alert()弹出的浏览器警告框,样式比较丑陋且和页面使用的Bootstrap框架样式不...jquery需要1.8以上,导入jquery-confirm的css样式文件和js文件,jQuery、jquery-confirm.css、jquery-co...
  • js的alert和confirm美化

    2019-09-30 15:04:47
    我们的想法是使用js和css分别仿照它们,提供另一套函数,使在不同浏览器的有着相同的体验效果。 --设计思路-- 为了保留原有的alert和confirm方法,我们不直接替换window对象的alert和confirm,而是新建一个win...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,115
精华内容 446
关键字:

js弹窗美化