没有地址栏的弹出窗口

Question

I seem to remember reading that modern browsers try to stop the hiding of the address bar of a popup window, but there were ways around this..

Currently I'm using this code :

<script language="javascript">
    var popupWindow = null;
    function centeredPopup(url,winName,w,h,scroll){
        LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
        TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
        settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
        popupWindow = window.open(url,winName,settings)
    }
</script>

<img onClick="centeredPopup('test.php','test','400','400','yes');return false" src="test.png">

In Safari it works great the popup shows with no address bar, but in Chrome, IE11 and Firefox the address bar is shown.

Is there anyway this can work with out the address bar in all the browsers I've listed, or can it be done using other code ? javascript, jquery, php ?

All I'm after is a simple popup that starts at a specific size, but is moveable, resizeable and scrollable if needed.

Thanks

** UPDATE **

I have this sort of working. The dialog appears with scroll bars but I can't scroll.

Any ideas ? This FIDDLE shows what I mean.

Answer 1

Maybe I'm getting something wrong, but just in case: The Fiddle you provided has set scrolling to "no" in the html. Once its set to "yes", its scrolling perfectly :)

<div id="dialog" style="display:none;" title="Dialog Title"><iframe frameborder="0" scrolling="yes" width="100%" height="100%" src="http://google.about.com/"></iframe></div>

Answer 2

You can do something similar:

<a class="test" href="www.somesite.com">Test</a> 
<div id="somediv-wrap">
  <div id="somediv">

  </div>
</div>

<script>
    $(document).ready(function() {  

        $("#somediv-wrap").dialog({
                  autoOpen: false,
                   width: 400, 
                   height:200,
                   modal: true
                  });  

        $(".test").click(function(event)
          {
              event.preventDefault();
              var link = $(this).attr('href');

              $("#somediv").load(link,function(){
               $( "#somediv-wrap" ).dialog( "open" );   
              });                        
      });
   });
</script>

You create your dialog, and when it is opened, an html file is loaded from your server, replacing the contents of your <div id="somediv"></div> , which should be inside your dialog <div class="somediv-wrap"/> .