javascript - pop-up a window when the user clicks a button

Here is my HTML code:

<p style="align-content: center">
  <A style="align-content: center" HREF="newpopup.html" onClick="return popup(this, 'stevie')">my popup</A><br>
</p>
<p align="center">
  <input type="button" onclick="popup(this, 'about') " value="CLICK HERE">
</p>

And JavaScript:

function popup(mylink, windowname)
{
  if (! window.focus)
    return true;
  var href;
  if (typeof(mylink) == 'string')
    href=mylink;
  else 
    href=mylink.href;
  window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
  return false;
}

My button 'CLICK HERE' pops-up a window but it is empty. I want my button to work just like above URL link 'my popup'.

So I want to open the contents of newpopup.html in my pop-up window on a button click.

My URL link for pop-up is working fine, I want the button to work thesame.

Here is my HTML code:

<p style="align-content: center">
  <A style="align-content: center" HREF="newpopup.html" onClick="return popup(this, 'stevie')">my popup</A><br>
</p>
<p align="center">
  <input type="button" onclick="popup(this, 'about') " value="CLICK HERE">
</p>

And JavaScript:

function popup(mylink, windowname)
{
  if (! window.focus)
    return true;
  var href;
  if (typeof(mylink) == 'string')
    href=mylink;
  else 
    href=mylink.href;
  window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
  return false;
}

My button 'CLICK HERE' pops-up a window but it is empty. I want my button to work just like above URL link 'my popup'.

So I want to open the contents of newpopup.html in my pop-up window on a button click.

My URL link for pop-up is working fine, I want the button to work thesame.

Share Improve this question edited Jun 22, 2017 at 12:39 Paul Roub 36.5k27 gold badges86 silver badges95 bronze badges asked Aug 21, 2015 at 18:50 SidJj 1421 gold badge1 silver badge11 bronze badges

Add a ment |

4 Answers 4

Sorted by: Reset to default 3

mylink (the button's this) isn't a string, so you try to open mylink.href:

if (typeof(mylink) == 'string')
  href = mylink;
else 
  href = mylink.href;

But buttons don't have href properties, so it's as if you wrote:

window.open(undefined, 'about', 'width=400,height=200,scrollbars=yes');

which opens a blank page, as expected. If you want to open the same page as the link, use:

onclick="popup('newpopup.html', 'about');"

Try this simple piece of code:

<script>
   function fullwindowpopup(){
      window.open("newpopup.html","bfs","fullscreen,scrollbars")
   }
</script>

<center>
    <form>
        <input type="button" onClick="fullwindowpopup()" value="CLICK HERE">
    </form>
</center>

Pop ups can be tricky if you want them to "float" above your html page. This can be obtained by using an absolute placement to place a "filter" and the required frame over your current page. Usually I go for something like this:

HTML

<body>
     ...
     <div class='myPopup'>
           <iframe src='http://www.myurl.' id='popup-frame'>
           </iframe> <!-- /#popup-frame -->
     </div> <!-- /.myPopup -->
     ...
</body>

CSS:

.myPopup {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #A8A8A8;
    opacity: 0.4;
    display: none;
    z-index: 100;
}

#popup-frame {
    position: absolute;
    top: 50%;
    left: 50%;
}

Stack Overflow Check this example.

The javascript is below

<script>
        function openPopup() {
            document.getElementById("boxPopup").style.display = "block";
        }

        function closePopup() {
            document.getElementById("boxPopup").style.display = "none";
        }
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            var modal = document.getElementById('boxPopup');
            if (event.target == modal) {
                closePopup();
            }
        }

    </script>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - pop-up a window when the user clicks a button - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)