精华内容
下载资源
问答
  • 好看的alert弹窗或样式弹窗

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

    好看的alert弹窗或样式弹窗

    弹窗
    该样式是我网上搜寻的,风格好看又简洁,不失大雅!

    就不过多描述了,自己体验一下吧~:点我体验一番

    一、引入js和css文件

    1、引入js和css文件

    直接在head引入:

    <link rel="stylesheet" type="text/css" href="https://www.huangwx.cn/css/sweetalert.css">
    
    <script type="text/javascript" src="https://www.huangwx.cn/js/sweetalert-dev.js"></script>
    

    注意此引用方式不稳定,如果遇到bug,请使用第二种下载的方式引入,如遇到某个元素不显示,或奇怪的bug,第一时间去控制台看元素不显示原因,比如我就遇到一个因为优先级问题成功(success)的弹窗的对号被盖住导致没有正确的动画效果,解决办法为在sweetalert.css中将success图标的z-index改为1或者0改为1

    2、或者下载之后再引入。
    下载链接在文末

    二、js调用替代alert

    二、js调用替代alert

    直接使用swal()函数替代alert函数即可,同时sweetalert还提供更加多样化的弹出框。

    1、标准弹出框

    swal("开始这个完美的弹出框旅程吧!")
    

    弹窗

    2、带标题和文本的alert

    swal("这是标题!","这是文本")
    

    在这里插入图片描述

    3、成功的提示,可以带动画效果的哦

    swal("这还是标题!","这还是文本","success")
    

    在这里插入图片描述

    4、带函数传值的alert

        swal({ 
    		title: "确定删除吗?", 
    		text: "你将无法恢复该虚拟文件!", 
    		type: "warning",
    		showCancelButton: true, 
    		confirmButtonColor: "#DD6B55",
    		confirmButtonText: "确定删除!", 
    		cancelButtonText: "取消删除!",
    		closeOnConfirm: false, 
    		closeOnCancel: false	
    		},
    		function(isConfirm){ 
    		if (isConfirm) { 
    			swal("删除!", "你的虚拟文件已经被删除。",
    		"success"); 
    		} else { 
    			swal("取消!", "你的虚拟文件是安全的:)",
    		"error"); 
    		} 
        });
    

    在这里插入图片描述

    5、可以内嵌html代码的alert

        swal({ 
    			title: "HTML <small>标题</small>!",
    			text: "自定义<span style='color:#0000FF'>这是蓝色的<span>。", 
    			html: true 
    		});
    

    在这里插入图片描述

    附:

    js+css下载地址:点我下载

    该文章转载自https://blog.csdn.net/windy1001/article/details/82685977
    原文出处地址http://mishengqiang.com/sweetalert/

    展开全文
  • 第N次造轮子了,只为最简单的调用,jquery模拟alert和confirm的弹窗插件 调用方法: $.alert('your message'); $.alert('your message',function(){ $.alert('click ok button') }); $....
  • SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。
  • 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)弹框样式可根据实际情况自行定义

    展开全文
  • 弹出框美化 alert样式美化

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

    引用style.css和ui.js就可以直接用以下接口调用!

    alert_带标题:

    mizhu.alert( 'alert_带标题' , '这是alert效果' );

     

    alert_带图标:

    mizhu.alert( '' , '这是alert效果' , 'alert_red' );

     

    alert_带标题带图标:

    mizhu.alert( 'alert_带标题带图标' , '这是alert效果' , 'alert_green' );

     

     alert_无标题无图标:

    mizhu.alert( '' , '这是alert效果' );

     

    confirm_无标题:

    mizhu.confirm( '' , '是否要取消关注?' , function (flag) {
         if (flag) {
             mizhu.alert( '' , '取消成功' );
         }
    });   

     

    confirm_带标题:

    mizhu.confirm( '' , '是否要取消关注?' , function (flag) {
         if (flag) {
             mizhu.alert( '温馨提醒' , '取消成功' );
         }
    }); 


    open:

    mizhu.open(600, 400, '新浪微博' , 'http://weibo.com/yuanyuanforlove' );


    toast_默认3秒消失:

    mizhu.toast( '已取消关注' );

    toast_自定义时间(6秒):

    mizhu.toast( '已取消关注' , 6000);

     

    下载Demo:

    http://files.cnblogs.com/files/yuanxiaojian/alert.rar


    本人参考了http://www.cnblogs.com/kewei/p/4423112.html 进行修改和美化,增加了一些自定义开关,后续会继续更新。

    展开全文
  • 美化alert弹窗

    2016-02-18 09:09:22
    配合bootStrap的alert弹窗,极其好用,样式很美观
  • javascript自定义alert弹窗

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

    我们都知道js中的alert有弹窗提示的作用,但它在实践项目中很少使用,原因就是因为长的太难看!那么今天我就给大家讲一下如何来美化这个系统自带的alert!详细代码如下:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <title>教你如何更改网页的默认alert弹窗</title>
    </head>
    <body>
    <!-- 更改系统默认弹窗 -->
    <script type="text/javascript">
    window.alert = function(str)
    {
        var shield = document.createElement("DIV");
        shield.id = "shield";
        shield.style.position = "absolute";
        shield.style.left = "50%";
        shield.style.top = "50%";
        shield.style.width = "280px";
        shield.style.height = "150px";
        shield.style.marginLeft = "-140px";
        shield.style.marginTop = "-110px";
        shield.style.zIndex = "25";
        var alertFram = document.createElement("DIV");
        alertFram.id="alertFram";
        alertFram.style.position = "absolute";
        alertFram.style.width = "280px";
        alertFram.style.height = "150px";
        alertFram.style.left = "50%";
        alertFram.style.top = "50%";
        alertFram.style.marginLeft = "-140px";
        alertFram.style.marginTop = "-110px";
        alertFram.style.textAlign = "center";
        alertFram.style.lineHeight = "150px";
        alertFram.style.zIndex = "300";
        strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
        strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[自定义alert]</li>\n";
        strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+str+"</li>\n";
        strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
        strHtml += "</ul>\n";
        alertFram.innerHTML = strHtml;
        document.body.appendChild(alertFram);
        document.body.appendChild(shield);
        this.doOk = function(){
            alertFram.style.display = "none";
            shield.style.display = "none";
        }
        alertFram.focus();
        document.body.onselectstart = function(){return false;};
    }
    </script>
    <script>
    // 测试 alert
    alert('自定义弹窗');
    </script>
    </body>
    </html>

    这里写图片描述
    原文地址:http://www.xttblog.com/?p=361

    展开全文
  • 完美的alert美化

    万次阅读 热门讨论 2018-09-13 12:28:39
    默认的alert总是在好看的样式下显得格格不入,所以在网上搜寻良久,终于找到了一个完美的美化方案。体验请点我 一、引入js和css文件 二、js调用替代alert 一、引入js和css文件 1、直接在head引入 &lt;...
  • 美化JS弹窗

    2012-11-27 13:20:08
    美化了原有的弹窗,做成类似凡客诚品的alert,confirm弹出窗样式,下载后修改即可使用。
  • jQuery弹窗(alert,confirm)美化插件,弹窗的一些样式,这个是很常用的,比如我们开发后台程序,往数据库添加内容,是否成功,这时候可以用这样的弹窗,php中文网推荐下载!
  • 这个组件是用来美化默认的js弹窗的,用它可以方便的弹出相关的信息,包括消息框,删除确认框等
  • JQuery Alert Confirm
  • 修改系统默认 alert 弹框样式

    千次阅读 2018-12-21 16:21:46
    修改默认 alert 弹框,思路很简单,定义一个 alert(e) 函数,加载最开头即可。 css部分: &lt;style&gt;  #msg{  width:266px;  position: fixed;  z-index:999;  top: 49%;  margin-top:-80px;  ...
  • 直接下载附件,运行index.html即可。 附件:http://down.51cto.com/data/2367113 本文转自tianjian_0913 51CTO博客,原文链接:http://blog.51cto.com/tianjian/1713031,如需转载请自行联系原作者 ... ...
  • 原生js写的弹窗效果(alert效果),非常好用,适用于各大主流的浏览器,包括ie、火狐、谷歌、360等
  • 美化弹出框

    2018-08-08 11:20:32
    jquery 各种弹出框美化效果jquery 各种弹出框美化效果
  • 原博客链接:jQuery弹出框美化插件(alert,confirm) //删除选中项 function doDelete() { let instanceIds=""; var total = 0; $("[name='chk']:checked").each(function(index, element) { total ++; ...
  • alert提示框(多种样式)

    2017-05-24 15:14:39
    alert提示框(多种样式), 和大家分享了
  • jquery的提示框比较好看自由度也比较大,白色小框还行吧。有例子使用相当简单。
  • 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
  • html自定义alert提示框

    2019-06-13 16:27:37
    有时候感觉系统自带的提示框太丑了,试试自定义提示框吧,直接引用js即可
  • alert和confirm弹出框样式美化,可自定义颜色和样式,无须调用浏览器自带弹框。
  • JS弹出对话框(美化窗体) 很好看的窗体弹出对话框
  • alert美化

    2017-05-05 17:44:00
     <title>Alert弹出窗口 美化体验版  ; charset=gb2312" />    <meta name="KeyWords" content="Alert弹出窗口 美化体验版 HTML网" />  <meta name="description" content="Alert弹出窗口 美化体验版 ...
  • 由于页面中原来的alert弹框样式相当的丑,所以就想到了自己去设置一下alert的弹框样式 首先是自己先设计好一个弹框的样式可以如下图: 样式搭建完成就可以用js来编写一个alert函数了: js部分如下:function alert...
  • bootstrap中的alert和原本的alert弹框可不太一样,原来我们熟悉的弹框是在执行某个动作的时候,浏览器和我们弹出来的一个提示框,比如下面这样:  而我们这里的警告框是在html内容之间的提示内容,只是他...
  • Laravel中使用SweetAlert美化提示框Alert The first step 使用composer安装Laravel到www目录下(这里以laravle5.6为例) composer create-project --prefer-dist laravel/laravel blog 5.6.* 若没有配置中国全量...
  • SweetAlert简单使用,弹出对话框

    万次阅读 热门讨论 2016-11-27 19:00:13
    SweetAlert可以替代JavaScript原生的alert和confirm等函数呈现的弹出提示框,它将提示框进行了美化,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 521
精华内容 208
关键字:

alert弹窗美化