All geek questions in one place

What is the best easy unobtrusive solution to open any link in a custom popup?

What is the best easy unobtrusive solution to open any link in a custom popup with a close button?

Edit 3:

  • and if JavaScript is disabled, the link should be opened in a new tab / window like any normal page.
  • the pop-up window should be open vertically and horizontally in any screen resolution (I see pop-ups of some sites on two monitors, the pop-up window opens on the second monitor) and without a toolbar, address bar, etc. Popup Height
  • must depend on content not fixed

I don’t want to use any plugin to get this effect, I just need simple and smaller code, which only requires a jquery library file

like this

alt text http://easycaptures.com/fs/uploaded/244/4705598517.jpg

Edit : I am not asking about the "modal window" and the "lightbox"

Edit 2:

If js is disabled, the popup should be open in a new window, and the "name" of the link should also be changed.

like this one . Content will be in a white place.

<a href="http://stackoverflow.com" Title="Opens in a new pop-up" target="_blank">

in that

<a href="http://stackoverflow.com" Title="Opens in a new window" target="_blank">

and is it possible to make the "close window" button even if JS is disabled.

+3
source share
3 answers

I do not think this is a good idea at all, but it will come in handy.

, , .

. , , () :
2: , , bobince - $this

<a id="close" href="your-link" target="_blank" title="opens in a new window">close</a>


$(document).ready(function(){
    $("#close").attr('title','opens in a new pop-up'); //set new title

    $("#close").click(function(){ //click action
        w = parseInt((screen.width - 600)/2); h = parseInt((screen.height - 400)/2);
        cwin = window.open($(this).attr('href'), 'closewin',
       'status=0,toolbar=0,location=0,menubar=0,directories=0,resizable=0,scrollbars=0,height=400,width=600');
        cwin.moveTo(w,h);
        return false;
    });
});

, , , .

+1

, script , , :

<a href="page.html" target="_blank">page</a>

script, click:

<a href="page.html" target="_blank" onclick="window.open(this.href,this.target,'width=200,height=300');return false;">page</a>

jQuery , , , , class="popup":

$(function(){
  $('a.popup').click(function(e){
    window.open(this.href,this.target,'width=200,height=300');
    e.preventDefault();
  });
});

, location=0,menubar=0,status=0,toolbar=0, .. . , , , .

, , top=...,left=.... , , .

, , iframe. , , :

$(function(){
  $('a.popup').click(function(e){
    var w = window.open('',this.target,'width=200,height=300')
    w.document.open();
    w.document.write(
      '<html>'+
      '<head>'+
      '<style>'+
      'iframe { border: none; height: 250px; }'+
      'a { float: right; padding: 10px; }'+
      '</style>'+
      '</head>'+
      '<body>'+
      '<iframe src="'+this.href+'"></iframe>'+
      '<a href="javascript:window.close();">Close</a>'+
      '</body>'
    );
    w.document.close();
    e.preventDefault();
  });
});
+1

- JQuery UI

.

"" ( ), , , (IE > 7 FF ).

0

Source: https://habr.com/ru/post/1732652/

More articles:


All Articles