设为首页收藏本站京东联盟微信公众号京东商城有优惠
京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步，快速开始

梦想之都-俊月星空 › 门户 ›站长分享 › 查看内容

$.messager.alert 模态弹窗 屏蔽叉按钮 点击确定之后跳转指定页面 ...

2025-4-16 11:53| 发布者: zhaojun917| 查看: 229| 评论: 0

摘要: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" titleEasyUI Modal Alert/title !-- 引入 jQuery -- script src="https://code ...
 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EasyUI Modal Alert</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 jQuery EasyUI 的 CSS 和 JS 文件 -->
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
    <script src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
  <style>
        /* 遮罩层样式 */
        .modal-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 9998;
            display: none;
        }
    </style>
</head>

 
<body>
<div class="modal-mask"></div>
    <button id="showAlert">显示弹窗</button>
    <script>
        $(document).ready(function () {
            $('#showAlert').on('click', function () {
 // 显示遮罩层
                $('.modal-mask').show();
                   var dialog = $.messager.alert({
                    title: '提示',
                    msg: '这是一个模态弹窗！',
                    icon: 'info',
                    buttons: [{
                        text: '确定',
                        handler: function () {
                            dialog.dialog('close');
                         // 隐藏遮罩层
                            $('.modal-mask').hide();
                            // 页面跳转
                            window.location.href = 'http://www.mxzdjyxk.cn';
                        }
                    }],
                   draggable:false 
                });
                // 确保弹窗渲染完成后再隐藏关闭按钮
                setTimeout(function () {
                    $('.messager-window .panel-tool-close').hide();
                }, 100);
 
              // 设置弹窗的 z-index 使其在最顶层
                dialog.dialog('window').css('z-index', 9999);
            });
        });
    </script>
</body>
</html>
收藏 分享 邀请
上一篇：广州市首批配售型保障性住房4月1日起开始网上申购下一篇：我有服务器之——内网穿透

相关分类

下级分类

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-10-31 08:51 , Processed in 0.036376 second(s), 17 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

返回顶部