脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js自定义弹出窗口

JavaScript 自定义弹出窗口的实现代码

 更新时间：2023年09月28日 15:57:41   作者：梁云亮  
这篇文章主要介绍了JavaScript 自定义弹出窗口的实现代码,实现一采用html编写弹出窗口内容,实现二采用JavaScript编写弹出窗口内容,结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

最终效果

单击弹出窗口

在这里插入图片描述

单击确定按钮

在这里插入图片描述

单击取消按钮，最初弹出的窗口隐藏

实现一：采用html编写弹出窗口内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dialog {
            position: absolute;
            z-index: 9999;
            top: 110px;
            left: 45%;
            transform: translate(-50%, -50%);
            width: 290px;
            height: 130px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            padding: 20px;
            display: none;
        }
        #dialog h3 {
            margin-top: 0;
        }
        #dialog div{
            margin-top: 15px;
        }
        #dialog button {
            margin-right: 10px;
            float: right;
        }
    </style>
</head>
<body>
<button onclick="showDialog()">弹出窗口</button>
<div id="dialog">
    <h3>导出数据</h3>
    <p>按页面条件导出数据还是导出所有的数据</p>
    <input type="radio" name="type" value="1" checked> 按页面条件导出
    <input type="radio" name="type" value="2"> 导出全部
    <div>
        <button onclick="hide()">取消</button>
        <button onclick="javascript:alert(22);">确定</button>
    </div>
</div>
<script>
    function show() {
        // 获取对话框元素并设置标题和消息
        let dialog = document.querySelector('#dialog');
        // 显示对话框
        dialog.style.display = 'block';
    }
    function hide() {
        // 获取对话框元素并隐藏
        let dialog = document.querySelector('#dialog');
        dialog.style.display = 'none';
    }
    function showDialog() {
        let dialog = document.querySelector('#dialog');
        dialog.querySelector('button').style.display = 'block';
        show('确认删除', '你确定要删除这条记录吗？');
    }
</script>
</body>
</html>

实现二：采用JavaScript编写弹出窗口内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dialog {
            position: absolute;
            z-index: 9999;
            top: 110px;
            left: 45%;
            transform: translate(-50%, -50%);
            width: 290px;
            height: 130px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            border-radius: 5px;
            padding: 20px;
            display: none;
        }
        #dialog h3 {
            margin-top: 0;
        }
        #dialog div {
            margin-top: 15px;
        }
        #dialog button {
            margin-right: 10px;
            float: right;
        }
    </style>
</head>
<body>
<button onclick="showDialog('导出数据')">弹出窗口</button>
<script>
    function showDialog() {
        let dialogDiv = document.createElement("div");
        dialogDiv.id = "dialog";
        let h3Element = document.createElement("h3");
        h3Element.innerText = '导出数据';
        dialogDiv.appendChild(h3Element);
        let pElement = document.createElement("p");
        pElement.innerText = "按页面条件导出数据还是导出所有的数据";
        dialogDiv.appendChild(pElement);
        let div1 = document.createElement("div");
        let input1Element = document.createElement("input");
        input1Element.type = "radio";
        input1Element.name = "requestType";
        input1Element.checked=true;
        input1Element.value = 1;
        div1.appendChild(input1Element);
        let span1 = document.createElement("span");
        span1.innerText = "按页面条件导出";
        div1.appendChild(span1);
        let input2Element = document.createElement("input");
        input2Element.type = "radio";
        input2Element.name = "requestType";
        input2Element.value = 2;
        div1.appendChild(input2Element);
        let span2 = document.createElement("span");
        span2.innerText = "按页面条件导出";
        div1.appendChild(span2);
        dialogDiv.appendChild(div1);
        let div2 = document.createElement("div");
        let button1 = document.createElement("button");
        button1.addEventListener("click", function () {
            dialogDiv.style.display = 'none';
        });
        button1.innerText = "取消";
        div2.appendChild(button1);
        let button2 = document.createElement("button");
        button2.addEventListener("click", function () {
            let checkValue=1;
            let radioButtons = document.getElementsByName('requestType');
            for (let i = 0; i < radioButtons.length; i++) {
                if (radioButtons[i].checked) {
                    checkValue =  radioButtons[i].value;
                    break;
                }
            }
            alert(checkValue)
        });
        button2.innerText = "确定";
        div2.appendChild(button2);
        dialogDiv.appendChild(div2);
        document.body.appendChild(dialogDiv);
        // 显示对话框
        dialogDiv.style.display = 'block';
    }
</script>
</body>
</html>

实现三：抽取成独立的JS插件，在网页中使用

第一步：抽取出exportDialog.css：

#dialog {
    position: absolute;
    z-index: 9999;
    top: 110px;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 290px;
    height: 130px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 20px;
    display: none;
}
#dialog h3 {
    margin-top: 0;
}
#dialog div {
    margin-top: 15px;
}
#dialog button {
    margin-right: 10px;
    float: right;
}

第二步；抽取出exportDialog.js：

/**
 *
 * @param url1  按页面条件导出
 * @param url2  导出全部数据
 */
function showDialog(url1,url2 ) {
    let dialogDiv = document.createElement("div");
    dialogDiv.id = "dialog";
    let h3Element = document.createElement("h3");
    h3Element.innerText = '导出数据';
    dialogDiv.appendChild(h3Element);
    let pElement = document.createElement("p");
    pElement.innerText = "按页面条件导出数据还是导出所有的数据";
    dialogDiv.appendChild(pElement);
    let div1 = document.createElement("div");
    let input1Element = document.createElement("input");
    input1Element.type = "radio";
    input1Element.name = "requestType";
    input1Element.checked=true;
    input1Element.value = 1;
    div1.appendChild(input1Element);
    let span1 = document.createElement("span");
    span1.innerText = "按页面条件导出";
    div1.appendChild(span1);
    let input2Element = document.createElement("input");
    input2Element.type = "radio";
    input2Element.name = "requestType";
    input2Element.value = 2;
    div1.appendChild(input2Element);
    let span2 = document.createElement("span");
    span2.innerText = "全部导出";
    div1.appendChild(span2);
    dialogDiv.appendChild(div1);
    let div2 = document.createElement("div");
    let button1 = document.createElement("button");
    button1.addEventListener("click", function () {
        dialogDiv.style.display = 'none';
    });
    button1.innerText = "取消";
    div2.appendChild(button1);
    let button2 = document.createElement("button");
    button2.addEventListener("click",function () {
        let checkValue=1;
        let radioButtons = document.getElementsByName('requestType');
        for (let i = 0; i < radioButtons.length; i++) {
            if (radioButtons[i].checked) {
                checkValue =  radioButtons[i].value;
                break;
            }
        }
        if(checkValue==1){
            //按页面条件导出
            document.location.href= url1
        }
        if(checkValue==2){
            //全部导出
            document.location.href= url2
        }
        //隐藏对话框
        dialogDiv.style.display = 'none';
    } );
    button2.innerText = "确定";
    div2.appendChild(button2);
    dialogDiv.appendChild(div2);
    document.body.appendChild(dialogDiv);
    // 显示对话框
    dialogDiv.style.display = 'block';
}

第三步：在页面中使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/tiku/static/dialog/exportDialog.css" rel="external nofollow" ></link>
    <script src="/tiku/static/dialog/exportDialog.js"></script>
</head>
<body>
<button onclick="showDialog('/tiku/subject/export?state=1&pid=-2','/tiku/subject/export?pid=-2')">弹出窗口</button>
<script>
</script>
</body>
</html>

到此这篇关于JavaScript 自定义弹出窗口的文章就介绍到这了,更多相关js自定义弹出窗口内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Javascript 是你的高阶函数(高级应用)

    Javascript 是你的高阶函数(高级应用)

    这篇文章主要介绍了Javascript 是你的高阶函数 ,需要的朋友可以参考下
    2015-06-06
  • js监听键盘事件示例代码

    js监听键盘事件示例代码

    本文为大家详细介绍下使用js如何监听键盘事件，具体实现代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-07-07
  • 微信小程序实现照片裁剪

    微信小程序实现照片裁剪

    这篇文章主要为大家详细介绍了微信小程序实现照片裁剪，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 浅谈js中Object.create()与new的具体实现与区别

    浅谈js中Object.create()与new的具体实现与区别

    本文主要介绍了js中Object.create()与new的具体实现与区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • JavaScript实现多个物体同时运动

    JavaScript实现多个物体同时运动

    这篇文章主要为大家详细介绍了JavaScript实现多个物体同时运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript常用本地对象小结

    JavaScript常用本地对象小结

    这篇文章主要介绍了JavaScript常用本地对象小结的相关资料,需要的朋友可以参考下
    2016-03-03
  • js中document.getElementById(id)的具体用法

    js中document.getElementById(id)的具体用法

    本文主要介绍了js中document.getElementById(id)的具体用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 如何使用JavaScript实现栈与队列

    如何使用JavaScript实现栈与队列

    这篇文章主要介绍了如何使用JavaScript实现栈与队列。栈和队列是web开发中最常用的两种数据结构。绝大多数用户，甚至包括web开发人员，都不知道这个惊人的事实。,需要的朋友可以参考下
    2019-06-06
  • webpack之devtool详解

    webpack之devtool详解

    这篇文章主要介绍了webpack之devtool详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 用JavaScript 判断用户使用的是 IE6 还是 IE7

    用JavaScript 判断用户使用的是 IE6 还是 IE7

    判断IE浏览器的脚本，方便根据浏览器不懂，支持不同的代码的分别调用。
    2008-01-01

最新评论