如何在没有新浏览器的情况下创建弹出窗口?

时间:2015-05-29 11:08:45

标签: javascript jquery

我目前正在使用这个:

function logData(lid){
    var dataWindow = window.open("analyze.php?id="+id,"Log Analysis",
            "top=300,scrollbars=yes, left=300, width=800 ,height=500");

}

但这是打开一个新的浏览器,并在移动设备覆盖原始网站 (一种不受欢迎的行为)。

我想知道是否有办法在没有的情况下创建一个小窗口 使用JavaScript和jquery开始一个新的浏览器?

2 个答案:

答案 0 :(得分:2)

最荒谬的基本:

window.onload=function(){

	document.body.onclick = function(e){

		if(e.target && e.target.tagName === 'A')
		{
			var skip = {
					'_blank':1,
					'_top':1,
					'_self':1,
					'_parent':1,
					'':1
				},
				elem = e.target;
			
			if(!skip[elem.target])
			{
				
				var possible_iframes = document.getElementsByName(elem.target);
				
				for(var i = 0, l = possible_iframes.length; i<l; i++)
				{
					if(possible_iframes[i].tagName === 'IFRAME')
					{
						e.preventDefault();
						
						possible_iframes[i].parentNode.style.display = 'block';
						possible_iframes[i].src = elem.href;
						
						var possible_close = possible_iframes[i].parentNode.getElementsByTagName('a');
						
						for(var j = 0, k = possible_close.length; j<k; j++)
						{
							if( possible_close[j].tagName === 'A' && possible_close[j].className.search(/\s*close\s*/) > -1 )
							{
								possible_close[j].onclick = function(){
									this.parentNode.style.display = 'none';
								};
								break;
							}
							
						}
						
						return true;
					}
				}
			}
		}
	}
};
html,body{width:100%;height:100%;margin:0;padding:0;}


.popup {
  display:none;
  background:rgba(0,0,0,0.5);
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
}

.popup iframe{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
  width:70%;
  height:75%;
}

.popup a.close {
  position: absolute;
  top: 12.5%;
  left: 85%;
  z-index: 4;
  border: 2px solid #FFF;
  border-radius: 50%;
  display: block;
  width: 19px;
  height: 19px;
  background: black;
  color: white;
  text-align: center;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
}
<div class="popup"><a class="close" href="#">&times;</a><iframe id="popup" name="popup"></iframe></div>

<a href="404.html" target="popup" id="test">test</a>

这不是完美的解决方案,因为每个元素的href必须在点击之前设置为 。 但是,如果你在服务器端生成链接,这将有很大帮助。

答案 1 :(得分:1)

您可以为此使用 iframe

<iframe id="frame" src="" style="display:none" ></iframe>

的javascript:

function logData(lid){
 var frame = $("frame");
 frame.src= "analyze.php?id="+id;
 frame.style.display = "block"
}

使用必要的css样式使其显示为弹出窗口。