var documentElement;
if (navigator.userAgent.toLowerCase().match(/webkit|msie 5/)) {
    // Webkit系（Safari, Chrome, iOS）判定
    if(navigator.userAgent.indexOf('Chrome') != -1){
      // Chromeはhtml要素
      documentElement = document.documentElement;
    } else {
      // Chrome以外はbody要素
      documentElement = document.body;
    }
} else {
    // IE（6以上）、Firefox、Operaはhtml要素
    documentElement = document.documentElement;
}
var ImageDiv = document.createElement("div");
var style = {
	display: "none",
	position: "absolute",
	top: "50px",
	left: "10%",
	width: "80%",
	margin: "auto",
	marginTop: "40px",
	textAlign: "center",
	padding: "10px",
	backgroundColor: "#f0f0f0",
};
Object.keys(style).forEach(function(name){
	ImageDiv.style[name] = style[name];
});
document.body.appendChild(ImageDiv);
function openImage(url){
	ImageDiv.innerHTML = '<img style="width: calc(95% - 20px)" src="' + url + '" onClick="closeImage()"><br><button onClick="closeImage()">閉じる</button>'
	var stop = document.documentElement.scrollTop || document.body.scrollTop;
	var top = stop + 50;
	ImageDiv.style.top = top + 'px';
	ImageDiv.style.display = "block";
}
function closeImage(){
	ImageDiv.style.display = "none";
}