I know the question has already been answered, but just for the sake of learning I am posting this other code, made 100% in the arm.
With enough help I was able to make a simple alert type box with a close button, with css and javascript.
I say it's 100 times more practical to use the bootstrap, I do not know if it's your case, but I'm still starting to study programming, it's 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 become difficult.
But I repeat, it's just for learning.
The code ...
Are two files, iframe.php and iframe2.php, test if you want.
(the code is practically 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';">×</span>
Ação
</div>
</body>
</html>
