js弹框

最新推荐文章于 2024-03-27 23:55:13 发布
最新推荐文章于 2024-03-27 23:55:13 发布
阅读量716 收藏
点赞数
分类专栏： 前端 文章标签： js弹框 jquery弹框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexu_blog/article/details/86647571
版权

1.引入jquery.min.js

2.上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script language="JavaScript" type="text/javascript" src="js/jquery.min.js"></script>
    </head>
<style type="text/css">
    a{text-decoration: none; color: #eee; display: block;}
    .button{width: 200px; height: 50px; border-radius: 20px; text-align:center;line-height: 50px;}
    .callout_button{background:#FF5B5B;margin:0 auto; }
    .callout_button:hover{background: red;}
    .close_button{background:#363636;margin:0 auto;}
    .close_button:hover{background: black;}
    .mask{width: 100%;height: 100%;background:#000;position: absolute;top: 0px;left:0px;opacity: 0.4;z-index: 8000; display: none;-moz-user-select: none; -webkit-user-select: none;}
    .dialog{width: 380px;background:#fff; position: absolute;z-index: 9000;padding-bottom: 10px; display: none;-moz-user-select: none; -webkit-user-select: none;}
    .dialog_head{width: 100%;height:50px;background:#4B4B4B;text-align: center;line-height: 50px;color: #eee; cursor: move;}
    .dialog_content{width: 100%;height:300px;}
</style>
    <body>
        <div id="callout" class="button callout_button"><a href="#">弹出对话框</a></div>
        <div id="mask" class="mask"></div>
        <div class="dialog" id="dialog">
            <div class="dialog_head" id="move_part">可拖拽部分</div>
            <div class="dialog_content"></div>
            <div class="button close_button" id="close"><a href="#">点我关闭对话框</a>
            </div>
        </div>

    </body>

<script>
    $(document).ready(function(){
            var $dialog = $("#dialog");
            var $mask = $("#mask");
            
            //自动居中对话框
            function autoCenter(el){
                var bodyW = $(window).width();
                var bodyH = $(window).height();
                var elW = el.width();
                var elH = el.height();
                $dialog.css({"left":(bodyW-elW)/2 + 'px',"top":(bodyH-elH)/2 + 'px'});        
            };
            
            //点击弹出对话框
            $("#callout").click(function(){
                $dialog.css("display","block"); 
                $mask.css("display","block");
                autoCenter($dialog); 
            });            
            
            //禁止选中对话框内容
            if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
                g('dialog').attachEvent('onselectstart', function() {
                  return false;
                });
            }
            //声明需要用到的变量
            var mx = 0,my = 0;      //鼠标x、y轴坐标（相对于left，top）
            var dx = 0,dy = 0;      //对话框坐标（同上）
            var isDraging = false;      //不可拖动

            //鼠标按下
            $("#move_part").mousedown(function(e){
                e = e || window.event;
                mx = e.pageX;     //点击时鼠标X坐标
                my = e.pageY;     //点击时鼠标Y坐标
                dx = $dialog.offset().left;
                dy = $dialog.offset().top;
                isDraging = true;      //标记对话框可拖动                
            });

            //鼠标移动更新窗口位置
            $(document).mousemove(function(e){
                console.log(11);
                var e = e || window.event;
                var x = e.pageX;      //移动时鼠标X坐标
                var y = e.pageY;      //移动时鼠标Y坐标
                if(isDraging){        //判断对话框能否拖动
                    var moveX = dx + x - mx;      //移动后对话框新的left值
                    var moveY = dy + y - my;      //移动后对话框新的top值
                    //设置拖动范围
                    var pageW = $(window).width();
                    var pageH = $(window).height();
                    var dialogW = $dialog.width();
                    var dialogH = $dialog.height();
                    var maxX = pageW - dialogW;       //X轴可拖动最大值
                    var maxY = pageH - dialogH;       //Y轴可拖动最大值
                    moveX = Math.min(Math.max(0,moveX),maxX);     //X轴可拖动范围
                    moveY = Math.min(Math.max(0,moveY),maxY);     //Y轴可拖动范围
                    //重新设置对话框的left、top
                    $dialog.css({"left":moveX + 'px',"top":moveY + 'px'});
                };
            });

            //鼠标离开
            $("#move_part").mouseup(function(){
                isDraging = false;
            });

            //点击关闭对话框
            $("#close").click(function(){
                $dialog.css("display","none");
                $mask.css("display","none");
            });

            //窗口大小改变时，对话框始终居中
            window.onresize = function(){
                autoCenter($dialog);
            };
        });
    
</script>
</html>

3.效果

hexu_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js弹提示框
07-13
js弹提示框
js弹框封装
05-10
在JavaScript的世界里，弹框是一种常见的用户交互方式，用于显示警告、询问、确认或提供信息。"js弹框封装"是指将多种弹框功能进行模块化处理，方便开发者在项目中快速、统一地调用。这里我们将深入探讨“zDialog v...
js的弹出框
apollo_miracle的博客
07-07 3583
js的弹出框包括三种：alert、confirm、prompt 1 alert() alert()方法有一个参数，就是用户想弹出的内容，弹出框很简单，就一个显示功能，你可以点击确认关闭这个弹出框。 例如： alert("hello world！"); 下图依次是IE浏览器、 火狐浏览器和谷歌浏览器的运行效果： 2 confirm() confirm()方法要求用户进行选择。确认或者取消，分别对应着confirm 方法的返回值为 true 或 false。 例如： var.
JS中的弹出框
张子又
01-14 1459
弹出框 1.alert警告框 alert(message)的作用是弹出一个提示框或者警告框，纯提示作用。 alert(“Hello World!”); 因为alert是window对象的函数，也可以通过window.alert()来调用。 window.alert(“Hello World!”); 2. prompt询问框 prompt(text,defaultText)的作用是弹出一个询问框，...
js弹出框
weixin_34390105的博客
05-11 84
js弹出框 alert()、confirm()、prompt()的区别和联系： 警告框alert(): alert是警告框，只有一个按钮"确定"无返回值 确认框confirm(): confirm是确认框，两个按钮，一个确定或者一个取消返回true或false，确认框用于使用户可以验证或者接收某些信息 提示框prompt()： prompt是提示框，返回输入的消息，或者其默认值...
JavaScript 弹出框
weixin_30265171的博客
06-05 132
JavaScript 有三种类型的弹出框：警告框、确认框和提示框。 警告框 如果要确保信息传递给用户，通常会使用警告框。 当警告框弹出时，用户将需要单击“确定”来继续。 语法 window.alert("sometext"); window.alert()方法可以不带window前缀来写。 实例 alert("我是一个警告框！"); 完整实例 <!DOCTYPE...
轻松实现js弹框显示选项
10-21
JavaScript（简称js）作为前端开发的核心技术之一，常常被用来实现各种复杂的弹框效果。本文将详细介绍如何使用js实现一个具有选项显示功能的弹框，该功能可以让用户通过点击来选择相应的选项，并且能够即时地在界面...
javascript弹框控件
05-27
JavaScript弹框控件是网页开发中的一个重要组成部分，它允许开发者以更加美观和交互性更强的方式向用户展示信息或获取用户输入。传统的JavaScript弹框如`alert()`、`prompt()`和`confirm()`虽然功能简单，但在现代...
Html可拖拽js弹框插件
04-24
HTML可拖拽js弹框插件是一种用于网页交互设计的工具，它结合了HTML、JavaScript（简称JS）和jQuery（简称JQ）以及CSS技术，实现了弹窗的动态效果。这个插件允许用户通过鼠标拖动来改变弹窗的位置，同时提供缩放功能...
js 弹框效果
08-19
"js 弹框效果"这个主题聚焦于如何利用JavaScript来实现动态的弹出窗口，为用户提供更加丰富的交互体验。模态窗口（Modal Window）是网页设计中常用的一种元素，它可以在用户操作主页面的同时强制用户关注特定信息...
JS实现自动消息弹出框
06-12
JS实现自动消息弹出框JS实现自动消息弹出框JS实现自动消息弹出框JS实现自动消息弹出框JS实现自动消息弹出框
js 弹框
有趣的难受
06-28 272
//信息是中文，其他的英文 layer.confirm(‘Are you sure？’, { btn: [‘Sure’,‘Cancel’] }, function(){ layer.msg(‘method’); }, function(){ //layer.msg(‘真的取消了’);//不显示提示直接关闭 }); ...
Javascript弹出对话框组件
weixin_34026276的博客
11-12 140
Javascript弹出对话框组件 自从做前端以来 也快有一年了，也接触过很多javascript框架，比如Jquery YUI KISSY等等，但是有时候太依赖于框架并不好，要更多的学习原审javascript才会更能理解！因为IT很多大型公司都有自己内部封装的框架，所以对于我们前端人员来说 框架并不可靠 可靠...
JS弹框
qq_45746493的博客
11-12 269
alert()，confirm()和prompt()三种弹框 第一种alert() alert弹框直接直接弹出，是一种警示弹框，在弹框出现后只有一个人确定按钮 alert("里面为弹出的内容"); 第二种confirm() confirm弹框有确定和取消按钮，是一种确认对话框 confirm("里面为弹出内容"); 对确认和取消按钮进行赋值 var a; a=confirm("里面为弹出内容");...
JavaScript的三种弹出提示框(alert、confirm、prompt)，前端开发实战
weixin_57992300的博客
03-27 1578
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
javascript弹框
最新发布
05-07
JavaScript弹框是一种常用的交互方式，可以在网页中显示提示信息或者获取用户的确认或输入。常见的JavaScript弹框有三种类型：警示框（alert）、确认框（confirm）和提示框（prompt）。 1. 警示框（alert）：用于向用户显示一条警示信息，只有一个确定按钮，用户点击确定后弹框消失。 例如： ``` alert("这是一个警示框！"); ``` 2. 确认框（confirm）：用于向用户显示一条确认信息，并提供确定和取消两个按钮，用户可以选择是否继续操作。 例如： ``` var result = confirm("确定要删除吗？"); if (result) { // 用户点击了确定按钮 } else { // 用户点击了取消按钮 } ``` 3. 提示框（prompt）：用于向用户显示一条提示信息，并提供一个输入框，用户可以输入相关内容。 例如： ``` var name = prompt("请输入您的姓名："); if (name) { // 用户输入了姓名 } else { // 用户取消了输入 } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hexu_blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值