圖片彈出層
在頁面上增加一個按鈕，點擊按鈕彈出圖片跑馬燈，網上大多數的插件包含太多的js Css 希望找到一個簡單一點的彈出層，從網上找點代碼改一下，記錄一下。
function alertMsg(msg, mode) { //mode爲空，即只有一個確認按鈕，mode爲1時有確認和取消兩個按鈕
msg = msg || '';
mode = mode || 0;
var top = document.body.scrollTop || document.documentElement.scrollTop;
var isIe = (document.all) ? true : false;
var isIE6 = isIe && !window.XMLHttpRequest;
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var winSize = function () {
var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
// innerHeight獲取的是可視窗口的高度，IE不支持此屬性
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
return {
'pageWidth': pageWidth,
'pageHeight': pageHeight,
'windowWidth': windowWidth,
'windowHeight': windowHeight
}
} ();
//alert(winSize.pageWidth);
//遮罩層
var styleStr = 'overflow:auto; top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;';
styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩層DIV
var shadowDiv = document.createElement('div'); //添加陰影DIV
shadowDiv.style.cssText = styleStr; //添加樣式
shadowDiv.id = "shadowDiv";
//如果是IE6則創建IFRAME遮罩SELECT
if (isIE6) {
var maskIframe = document.createElement('iframe');
maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
maskIframe.frameborder = 0;
maskIframe.src = "about:blank";
shadowDiv.appendChild(maskIframe);
}
document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩層加入文檔
//彈出框
var styleStr1 = 'overflow:auto; max-height:500px;display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150) + 'px;'; //彈出框的位置
var alertBox = document.createElement('div');
alertBox.id = 'alertMsg';
alertBox.style.cssText = styleStr1;
//創建彈出框裏面的內容P標籤
var alertMsg_info = document.createElement('div');
alertMsg_info.id = 'alertMsg_info';
alertMsg_info.innerHTML = msg;
alertBox.appendChild(alertMsg_info);
//創建按鈕
var btn1 = document.createElement('a');
btn1.id = 'alertMsg_btn1';
btn1.href = 'javas' + 'cript:void(0)';
btn1.innerHTML = '<cite>確定</cite>';
btn1.onclick = function () {
document.body.removeChild(alertBox);
document.body.removeChild(shadowDiv);
return true;
};
alertBox.appendChild(btn1);
if (mode === 1) {
var btn2 = document.createElement('a');
btn2.id = 'alertMsg_btn2';
btn2.href = 'javas' + 'cript:void(0)';
btn2.innerHTML = '<cite>取消</cite>';
btn2.onclick = function () {
document.body.removeChild(alertBox);
document.body.removeChild(shadowDiv);
return false;
};
alertBox.appendChild(btn2);
}
document.body.appendChild(alertBox);
}
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
function Play() {
var strUrl = window.location.href;
var arrUrl = strUrl.split("/");
var strPage = arrUrl[arrUrl.length - 1].split(".")[0];
alertMsg("<img src='images/" + strPage + ".png' style='width:90%;height:90%;' >", "2");
}
document.writeln('<style type="text/css"> ');
document.writeln(' #alertMsg { ');
document.writeln(' display: none; ');
document.writeln(' width: 600px; ');
document.writeln(' border: 1px solid #ddd; ');
document.writeln(' border-radius: 5px; ');
document.writeln(' box-shadow: 1px 1px 10px black; ');
document.writeln(' padding: 10px; ');
document.writeln(' font-size: 12px; ');
document.writeln(' position: absolute; ');
document.writeln(' text-align: center; ');
document.writeln(' background: #fff; ');
document.writeln(' z-index: 100000; ');
document.writeln(' } ');
document.writeln(' #alertMsg_info { ');
document.writeln(' padding: 2px 15px; ');
document.writeln(' line-height: 1.1em; ');
document.writeln(' text-align: left; ');
document.writeln(' } ');
document.writeln(' #alertMsg_btn1, #alertMsg_btn2 { ');
document.writeln(' display: inline-block; ');
document.writeln(' background: url(images/gray_btn.png) no-repeat left top; ');
document.writeln(' padding-left: 3px; ');
document.writeln(' color: #000000; ');
document.writeln(' font-size: 12px; ');
document.writeln(' text-decoration: none; ');
document.writeln(' margin-right: 10px; ');
document.writeln(' cursor: pointer; ');
document.writeln(' } ');
document.writeln(' #alertMsg_btn1 cite, #alertMsg_btn2 cite { ');
document.writeln(' line-height: 24px; ');
document.writeln(' display: inline-block; ');
document.writeln(' padding: 0 13px 0 10px; ');
document.writeln(' background-color:#3377b4; ');
document.writeln(' font-style: normal; ');
document.writeln(' } ');
document.writeln('</style>');
document.writeln('<input type="button" id="btnModelCheck" value="查看模型" style="width:80px;height:25px;" class="sear_bott" onclick="Play()" /> ');