确定 取消

七空幻音LOGO

七空幻音
用户头像啦

登录注册

模拟自定义alert与confirm样式2015-10-20 01:32:18

前段时间做ACG Balrogs的时候感觉系统自带的alert与confirm非常难看，所以百度了一下这两个的自定义，但是一看百度上面的代码！WTF？什么鬼，根本看不懂，对于我这种js渣来说简直是在看天书了，所以想了半天终于自己搞出来了一个自定义的弹窗样式，接下来我就和大家来分享一下这串代码 效果图如下：

基本只用html和css设计一下弹窗的结构和样式在用javascript让这个弹窗运行起来即可。 html首先要设置一层遮罩层，就是如上图后面所看到的浅黑背景，这样做的目的就是让弹窗出现后用户不可以点击后面的元素。之后将弹窗的框上下居中设置框内样式即可之后设置js函数后触发并传递标题和内容还有附带的一个类型(类型之后会说到有什么用的)。 首先上HTML结构代码与CSS代码，JS代码我会详细叙述： 

HTML:

  

<!--alert的HTML-->
<div id="zhezhao">
    <div class="alert">
        <p class="alert_top">
            <span id="alert_title"></span><!--不需要大家在这里直接设置标题-->
            <span class="alert_exit icon" onclick="exit_btn()" style="font-size:18px;font-weight: bold;">ｘ</span><!--此处的x大家可以用font字体代替使用比较好看-->
        </p>
        <p id="alert_content"></p><!--也不需要大家在这里直接设置内容-->
        <div class="alert_button">
            <input type="button" value="确  认" class="alert_ok_btn" id="true_btn" onclick="true_btn()"/>
        </div>
    </div>
</div>
<!--alert end-->
<!--confirm的HTML-->
<div id="confirm">
    <div class="alert">
        <p class="alert_top">
            <span id="confirm_title"></span>
            <span class="alert_exit icon" onclick="exit_btn()" style="font-size:18px;font-weight: bold;">ｘ</span>
        </p>
        <p id="confirm_content"></p>
        <div class="alert_button">
            <input type="button" value="确  认" class="select_alert_ok_btn" id="select_true_btn" onclick="true_btn()"/>
            <input type="button" value="取  消" class="select_alert_no_btn" id="select_false_btn" onclick="true_btn()"/>
        </div>
    </div>
</div>


CSS: 


<style>
        *{/*由于我这里只有弹窗所以直接就使用通配符了*/
            margin:0;
            padding:0;
        }
        #zhezhao,
        #confirm{/*定义alert和confirm的遮罩层浅黑透明，高度宽度都为100%*/
            background:rgba(0,0,0,0.6);
            height:100%;/*继承父类，如果父类不是100%请自行设置*/
            width:100%;
            position:fixed;/*固定遮罩层*/
            top:0;/*设置位置，这个很重要，如果不设置有可能导致位置错乱*/
            left:0;
            display:none;/*首先隐藏，弹出后处于最顶层*/
            z-index:99999999999;
        }
        .alert{
            overflow:hidden;
            border:2px solid #d4d5dc;
            height:150px;
            width:300px;
            border-radius:5px;
            background: rgb(248, 248, 248);
            position:fixed;
            top:50%;/*让他绝对居中*/
            left:50%;
            margin-top:-180px;
            margin-left:-160px;
            z-index:999999999999;
        }
        /*之后就没有什么特别需要讲的css样式了*/
        .alert_top{
            width:100%;
            height:25px;
            line-height:25px;
            color:#000;
            text-indent:.5em;
            border-bottom:1px dashed #ccc ;
        }
        #alert_content,
        #confirm_content {
            margin:5px 5px 2px;;
            width:auto;
            height:90px;
            line-height:20px;
            overflow:hidden;
            text-indent:2em;
            color:#555;
            font-size:14px;
        }
        #alert_title,
        #confirm_title{
            float:left;
            font-weight: bold;
            color:#555;
            font-size:12px;
        }
        .alert_exit{
            float:right;
            margin-right:10px;
            width:auto;
            font-size:13px;
            height:100%;
            cursor:pointer;
        }
        .alert_button{
            width:100%;
            height:35px;
        }
        .alert_ok_btn{
            margin-bottom:15px;
            margin-left:auto;
            margin-right:auto;
            display:block;
            width:60px;
            border:1px solid #5ad4f4;
            background: #51dbee;
            color:#fff;
            border-radius:2px;
            cursor:pointer;
        }
        .alert_ok_btn:hover{
            border:1px solid #57c2e0;
            background: #4cccde;
        }
        .select_alert_ok_btn{
            margin-bottom:15px;
            width:60px;
            border:1px solid #5ad4f4;
            background: #51dbee;
            color:#fff;
            border-radius:2px;
            cursor:pointer;
            float:left;
            margin-left:50px;

        }
        .select_alert_ok_btn:hover{
            border:1px solid #57c2e0;
            background: #4cccde;
        }
        .select_alert_no_btn{
            margin-bottom:15px;
            margin-left:50px;
            width:60px;
            border:1px solid #eaeaea;
            background: #d9d9d9;
            color:#fff;
            border-radius:2px;
            cursor:pointer;
            float:right;
            margin-right:50px;

        }
        .select_alert_no_btn:hover{
            border:1px solid #bababa;
            background: #ababab;
        }
    </style>


最关键的就是javascript了 我先把js代码贴出来，在一个一个的讲述。

JS: 

<script>
//alert的自定义函数
//参数我设置了3个，第一个是标题，第二个是内容，第三个则是传递的类型(也可以叫确定触发的函数,可选项)
    function alert_start(a_title, a_content, a_type) {
        document.getElementById("zhezhao").style.display = "block";//首先点击触发alert弹窗函数后将他显示出来
        document.getElementById("alert_title").innerHTML = a_title;//然后将传递的标题使用innerHTML替换为弹窗标题
        document.getElementById("alert_content").innerHTML = a_content;//这个也是将传递的内容替换为弹窗内容
        //下一步则是在文档中找到名为true_btn的id属性为onclick(此处的getAttributeNode是和JQ的attr属性差不多)
        var true_btn = document.getElementById("true_btn").getAttributeNode("onclick");
        //判断如果传递了类型属性就会使用(这是可选项)
        if(a_type!=""){
            //此处需注意一下：如果你选择使用函数的话无需更改，如果你要直接使用js代码的话 将+"()"删除掉
//传递的类型，这个地方你可以这样理解：true_btn的onclick 通过nodeValue就可以获取onclick的值
//在这里就可以将a_type的值替代原有的onclick的值
            true_btn.nodeValue=a_type+"()"; 
        }
        //这也是可选项，在窗口弹出的时候禁止用户右键点击,需要无需修改，不需要请删除,下面也有此类代码
        oncontextmenu = function () {
             return false;
         }
    }

//confirm的自定义函数
//同alert弹窗一样的参数代码可参考alert的来查看，这里我就不多说了
    function confirm_start(c_title,c_content,c_type){
        document.getElementById("confirm").style.display = "block";
        document.getElementById("confirm_title").innerHTML = c_title;
        document.getElementById("confirm_content").innerHTML = c_content;
        var true_btn = document.getElementById("select_true_btn").getAttributeNode("onclick");
        if(c_type!=""){
            true_btn.nodeValue=c_type+"()";
        }
        oncontextmenu = function () {
             return false;
         }
    }
//默认确认按钮
    function true_btn() {
        document.getElementById("zhezhao").style.display = "none";//将alert与confirm隐藏
        document.getElementById("confirm").style.display = "none";
        oncontextmenu = function () {//设置右键禁止的可以使用，如果没有设置删除代码即可
            return true;
        }
        return true;
    }
    function exit_btn() {
        document.getElementById("confirm").style.display = "none";//将alert与confirm隐藏
        document.getElementById("zhezhao").style.display = "none";
        oncontextmenu = function () {
            return true;
        }
        return false;
    }
//上面两个自定义函数代码都差不多，但是最后面都返回的不同值，其实我最后才发现也没有什么用了，大家删掉就行了
</script>


如何来触发这两个弹窗呢？ 


<!--肯定是用onclick或者href等等来触发咯~-->
<button onclick="alert_start('标题','这是一个alert弹窗内容','')">alert弹出</button>
<button onclick="confirm_start('标题','这是一个confirm弹窗内容','')">confirm弹出</button>


两个参数均为相同,第一个为标题,第二个为提示的内容，第三个为自定义函数或直接使用的函数(类型~)明白就行了 为了避免大家看了代码后，使用中无法使用，我将文件打包，大家可以自行下载，不懂的可以在评论回复 哦，对了~弹窗的内容可以使用标签~

下载地址：

【七空幻音】自定义弹窗

收藏
本文来自幻音い的原创文章,转载请注明来源 七空幻音+ https://blog-old.acgxt.com/115.html
上一篇

wordpress下的STMP邮件发送

1条评论登录后可见

用户头像
幻音い
咕了咕了咕了....

文章:125

收藏:3

查看更多
详细图片
载入中...
返回顶部 一发评论 前往底部