模态对话框

最新推荐文章于 2023-09-17 16:35:05 发布

73、

最新推荐文章于 2023-09-17 16:35:05 发布

阅读量141

点赞数 1

分类专栏： # 前端实例文章标签： DOM 模态对话框 html自定义弹框

本文链接：https://blog.csdn.net/weixin_40318474/article/details/103545748

版权

前端实例专栏收录该内容

7 篇文章 0 订阅

订阅专栏

效果：点击add按钮，会有一个弹框出现，点击弹框的cancel按钮，弹框会消失。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
            <style>
                .hide{
                    display: none;
                }
                .c1{
                    position:fixed;
                    left: 0;
                    top:0;
                    right:0;
                    bottom:0;
                    background-color:black;
                    opacity:0.6;
                    z-index:9;
                }
                .c2{
                    width:500px;
                    height:400px;
                    background-color:white;
                    position: fixed;
                    left: 50%;
                    top:50%;
                    margin-left:-250px;
                    margin-top:-200px;
                    z-index:10;
                }
            </style>
        </head>
        <body style="margin: 0;">
            <div>
                <input type="button" value="add" οnclick="show();"/>
                <table>
                    <thread>
                        <tr>
                            <th>主机名</th>
                            <th>端口</th>
                        </tr>
                    </thread>
                    <tbody>
                        <tr>
                            <td>1.1.1.1</td>
                            <td>90</td>
                        </tr>
                        <tr>
                            <td>1.1.1.2</td>
                            <td>91</td>
                        </tr>
                        <tr>
                            <td>1.1.1.3</td>
                            <td>92</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!--遮罩层开始-->
            <div id='i1' class='c1 hide'></div>
            <!--遮罩层结束-->

            <!--弹出框开始-->
            <div id='i2' class="c2 hide">
                <p><input type="text" /></p>
                <p><input type="text" /></p>
                <p>
                    <input type="button" value="cancel" οnclick="hide();"/>
                    <input type="button" value="sure"/>
                </p>
            </div>
            <!--弹出框结束-->

            <script>
                function show(){
                    document.getElementById('i1').classList.remove('hide');
                    document.getElementById('i2').classList.remove('hide');
                }

                function hide(){
                    document.getElementById('i1').classList.add('hide');
                    document.getElementById('i2').classList.add('hide');
                }
            </script>
        </body>
    </html>

73、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模态对话框

效果：点击add按钮，会有一个弹框出现，点击弹框的cancel按钮，弹框会消失。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
复制链接

扫一扫

专栏目录