JSFiddle - React, Tailwind, and code Playground

by lmcdevloper

HTML

<script>
var _txt = 'Hola Mundo!';
</script>
<form name='EF'>
Mi formulario 
</form>
<p>
Resto de contenido
</p>

CSS

#myAlert{
	width:100%;
	cursor:pointer;
	text-align:center;
	position:absolute;
	margin:0px auto;
	top:100px;
	color:#333;	
}
#myAlertContent{
	width:50%;
	background-color:#FCFCFC;
	border:1px solid #666666;
	display:inline-block;	
}
#myAlertContentText{
	margin: 20px;
	clear:both;
}
.myAlertButton {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Georgia;
  color: #666666;
  font-size: 12px;
  background: #ebeceb;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border: none;
  cursor:pointer;
  display:inline-block;
  margin-bottom: 20px;
}

.myAlertButton:hover {
  background: #dde0dd;
  text-decoration: none;
}

JavaScript

document.getElementsByTagName('form')[0].style.opacity = '0.3';
	var div = document.createElement('div');
	div.setAttribute('id','myAlert');

	var divContent = document.createElement('div');
	divContent.setAttribute('id','myAlertContent');

	var divText = document.createElement('div');
	divText.setAttribute('id','myAlertContentText');
	divText.innerHTML = _txt;
	divContent.append(divText);
	div.append(divContent);
	
	var button = document.createElement('button');
	button.setAttribute('class','myAlertButton');
	button.innerHTML = 'Aceptar';
	document.body.addEventListener('click', function(event) {
		document.body.removeChild(document.getElementById('myAlert'));
		document.getElementsByTagName('form')[0].style.opacity = '1';
	});	
	
	divContent.append(button);
	document.body.appendChild(div);