CODEWITHSUNDEEP
javascriptjquery
orestiss
orestiss

Reputation: 2283

How to create a pop up window without a new browser?

I am currently using this:

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

}

But this is opening a new browser, and in a mobile covers the original site (an unwanted behaviour).

I want to know if there is a way to create a small window without starting a new browser using JavaScript and jquery?

Upvotes: 0

Views: 95

Answers (2)

Ismael Miguel
Ismael Miguel

Reputation: 4241

The most ridiculously basic one:

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>

This is not the perfect solution, since the href for each element must be set before the click.
But, if you generate the links on server-side, this will help a lot.

Upvotes: 2

Shanavas M
Shanavas M

Reputation: 1629

You may user iframe for this.

<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"
}

Using necessary css styles make it appear like a popup.

Upvotes: 1

Related Questions