XM466005做选择题填写ABCD

场景:做选择题的时候,点击一个链接,弹出一个div,div上有4个按钮,按钮A、按钮B、按钮C 、按钮D,点击按钮(A、B、C、D),就是选择答案A、B、C、C。脚本如下:

$(document).ready(function () {
    $("td[colname='DTNR']").find("input").click(function () {
        var me = $(this);
        var str = me.closest("tr").find("td[colname='TMMC']").find("textarea").val();
        var pos = $(me).offset();
        var topPos;
        var msgw = 600, msgh = 400;
        var sWidth = document.body.offsetWidth;
        var sHeight = Math.max(
            document.body.clientHeight,
            document.documentElement.clientHeight,
            document.body.scrollHeight,
            document.documentElement.scrollHeight
        );
           if (pos.top + pos.height + msgh <= $(window).height()) {
            // 下方空间足够,显示在下方
            topPos = pos.top + pos.height;
        } else {
            // 下方空间不足,显示在上方
            topPos = pos.top - msgh;
        }
        
      
        // 创建背景遮罩
        var bgObj = $("<div></div>")
            .attr("id", "alertbgDiv")
            .css({
                position: "fixed",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                background: "#E8E8E8",
                opacity: 0.6,
                zIndex: 10000
            })
            .appendTo("body");

        // 针对IE6固定定位的Hack(不推荐,除非必要)
        if ($.browser.msie && $.browser.version <= 6) {
            bgObj.css({
                position: "absolute",
                top: $(window).scrollTop(),
                left: $(window).scrollLeft()
            });
        }

        // 创建提示窗口
        var msgObj = $("<div></div>")
            .attr("id", "alertmsgDiv")
            .css({
                position: "fixed",
                left: pos.left,
                top: topPos,
                transform: "translate(-50%, -50%)",
                width: msgw + "px",
                height: msgh + "px",
                background: "white",
                border: "1px solid #336699",
                textAlign: "left",
                lineHeight: "25px",
                zIndex: 10001,
                padding: "20px",
                boxShadow: "0 5px 15px rgba(0,0,0,0.3)"
            })
            .attr("role", "dialog")
            .attr("aria-labelledby", "alertmsgTitle")
            .attr("aria-describedby", "msgTxt")
            .appendTo("body");

        // IE9以下不支持transform,使用替代方案
        if ($.browser.msie && parseInt($.browser.version, 10) < 9) {
            msgObj.css({
                position: "absolute",
                top: (sHeight - msgh) / 2,
                left: (sWidth - msgw) / 2
            });
        }

        // 添加标题
      /*  $("<h4></h4>")
            .attr("id", "alertmsgTitle")
            .css({
                margin: 0,
                padding: "3px",
                background: "#336699",
                color: "white",
                fontSize: "14px",
                fontFamily: "Verdana, Geneva, Arial, Helvetica, sans-serif",
                textAlign: "center"
            })
            .text("提示信息")
            .appendTo(msgObj);*/

        // 添加消息内容
        $("<p></p>")
            .attr("id", "msgTxt")
            .css({
                margin: "16px 0",
                color: "#333",
                fontSize: "16px",
                textAlign: "left"
            })
            .html(str || "暂无消息")
            .appendTo(msgObj);

        // 定义按钮配置
        var buttons = [
            { text: 'A', value: 'A' },
            { text: 'B', value: 'B' },
            { text: 'C', value: 'C' },
            { text: 'D', value: 'D' },
            { text: '取消', value: 'cancel' }
        ];

        // 创建按钮容器
        var buttonContainer = $("<div></div>").css({
                textAlign: "center",
                marginTop: "20px"
            }).appendTo(msgObj);

        // 动态生成按钮
        $.each(buttons, function(index, btn) {
            $("<a></a>")
                .text("[" + btn.text + "]")
                .css({
                    cursor: 'pointer',
                    padding: '5px 10px',
        fontSize: "18px",
                    color: '#007BFF',
                    textDecoration: 'underline',
                    display: 'inline-block',
                    margin: '0 5px'
                })
                .attr("name", btn.value)
                .click(function(e) {
                    if (e.preventDefault) {
                        e.preventDefault();
                    } else {
                        e.returnValue = false; // IE8及以下
                    }
                    if (btn.value !== 'cancel') {
me.focus().keydown().val(btn.value).blur();
                    }
                    closewin();
                })
                .appendTo(buttonContainer);
        });

        // 关闭提示框的函数
        function closewin() {
// $("#alertbgDiv").hide();
          $("#alertbgDiv").remove();
          $("#alertmsgDiv").remove();
        }

        // 可选:点击背景遮罩关闭提示框(IE6需要特殊处理)
        bgObj.click(function(e) {
            if (e.target === this) {
                closewin();
            }
        });

        // 可选:按下ESC键关闭提示框
        $(document).on('keydown.alert', function(e) {
            if (e.key === "Escape") {
                closewin();
            }
        });
    });
});

 

posted @ 2025-07-10 08:38  知行一体2  阅读(16)  评论(0)    收藏  举报