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(); } }); }); });
浙公网安备 33010602011771号