分享自己用JS写的一个很简单的弹出框对象

本文链接：https://blog.youkuaiyun.com/wenzhibincom/article/details/80374735

本文提供了一段使用JavaScript和CSS实现自定义提示窗口的源代码。该代码详细展示了如何在网页中创建一个包含标题、内容及按钮的标准弹窗，并通过CSS进行了样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上源代码

var msgWindow={
    T_div:function (){
        var str="<div class=\"T_main\" >\n" +
            "    <div class=\"T_window\">\n" +
            "        <div class=\"T_title\"><span>提示</span><a href=\"javascript:;\">X</a></div>\n" +
            "        <div class=\"T_content\"></div>\n" +
            "        <div class=\"T_button\"></div>\n" +
            "    </div>\n" +
            "</div>";
        $('body').append(str);
    },
    T_style:function (){
    $('.T_main').css('width','100%');
    $('.T_main').css('height','100%');
    $('.T_main').css('position','fixed');
    $('.T_main').css('left','0');
    $('.T_main').css('top','0');
    $('.T_main').css('background','#808080');
    $('.T_main').css('opacity','0.8');

    $('.T_window').css('width','35%');
    $('.T_window').css('height','40%');
    $('.T_window').css('background','#f5f5f5');
    $('.T_window').css('border','rgb(12, 87, 240) 1px solid');
    $('.T_window').css('position','absolute');
    $('.T_window').css('left','32%');
    $('.T_window').css('top','20%');
    $('.T_window').css('border-radius','5px');
    $('.T_window').css('text-align','center');

    $('.T_title').css('width','100%');
    $('.T_title').css('height','10%');
    $('.T_title').css('border-radius','5px');
    $('.T_title').css('background','#e0ecff');
    $('.T_title').css('text-align','left');

    $('.T_title span').css('padding','3% 3% 0');

    $('.T_title a').css('text-decoration','none');
    $('.T_title a').css('color','#000');
    $('.T_title a').css('display','inline-block');
    $('.T_title a').css('width','8%');
    $('.T_title a').css('height','8%');
    $('.T_title a').css('background','rgb(149, 184, 239)');
    $('.T_title a').css('text-align','center');
    $('.T_title a').css('position','absolute');
    $('.T_title a').css('top','0');
    $('.T_title a').css('right','5%');
    $('.T_title a').click(function(){
        $('.T_main').remove();
    })

    $('.T_content').css('width','80%');
    $('.T_content').css('height','74%');
    $('.T_content').css('font-size','20px');
    $('.T_content').css('color','#64616a');
    $('.T_content').css('margin','1% auto');

    $('.T_button').css('width','80%');
    $('.T_button').css('height','15%');
    $('.T_button').css('text-align','right');
    $('.T_button').css('margin','0 auto');
    $('.T_button').css('line-height','100%');

    $('.T_button').append("<button>确定</button>");

    $('.T_button button').css('width','15%');
    $('.T_button button').css('height','70%');
    $('.T_button button').css('background','#e6f0ff');
    $('.T_button button').css('border-radius','5px');
    $('.T_button button').css('border','0');
    $('.T_button button:last').click(function(){
        $('.T_main').remove();
    })
},
    T_window:function (msg){
        this.T_div();
        $('.T_content').html(msg);
        this.T_style();
    }
}

效果如图