Open message window inside html page

Asked

Viewed 7,095 times

-1

For a long time I try to do this but I don’t know how, like, several sites have a link that when I click opens a window as if it were a more fixed pop up on the page, but I’ve tried everything I’ve already tapped into the source code of the others but not even so I could...

I don’t know if I can put link here, but it’s like that site here look: http://www.posts.grandesclassicosdocinema.com/2017/06/nineteen-eighty-four-1984-1956.html

within the post in the written part "DOWNLOAD - SUBSCRIBERS" when click opens such custom window...

people like that, like I’m currently having to use a pop up window to display a small form, but if I could do this window then I would put an "iframe" in it and would be much better to access... if someone knows how to do pf help.

Then in the window would be the frame maybe a text of 2 lines at most and a button close only, now the size and design I turn people just want the idea really.

javascript html html5 css3

2 answers

1


  • perfect that’s right, I didn’t know I had that name so I couldn’t find anywhere else thank you

0

I know the question has already been answered, but only for learning reasons am I posting this other code, done 100% in the arm.
With a lot of help I managed to make a simple Alert type box with a close button, with css and javascript.
I say that it is 100 times more practical to use the bootstrap, I do not know if it is your case, but I am still starting to study programming, it is even fun and challenging to learn how simple programs, or in this case an alert box/ dialog are made part by part, or even 0, but some things that seem easy end up becoming difficult.
But I repeat, it’s only for learning reasons.
The code...
There are two files, iframe.php and iframe2.php, test if you want.
(the code is almost raw, nothing that a css does not solve).

iframe.php

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>    
    <div id="janela" style="display: none; position: absolute;">
      <iframe id="iframejanela" name="iframejanela" frameborder="3" style="height: 200px;"></iframe>
    </div>
    <input type="button" name="alert" id="alert" value="Clique" onClick="javascript: abrir();">
  </body>
</html>
<script language="javascript">
  function abrir(){
    document.getElementById('janela').style.display='';
      window.open('iframe2.php', "iframejanela");
}
</script>

iframe2.php

<DOCTYPE html>
<html>
  <head>
    <style>
/*Tamanho do alert*/
      .alert{
        padding: 20px;
        background-color: #EDEDED;
        color: #000000;
        cursor: default;
        width: 100px;
        height: 100px;
      }
/*Botão de fechar*/
      .closebtn{
        margin-left: 15px;
        color: #000000;
        float: right;
        font-size: 22px;
        line-height: 20px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="alert">
        <span class="closebtn" onClick="window.frameElement.parentElement.style.display='none';">&times;</span>
            Ação
    </div>
  </body>
</html>

Browser other questions tagged javascript html html5 css3

You are not signed in. Login or sign up in order to post.