JSFiddle - React, Tailwind, and code Playground
HTML
<a href="http://enderecodosite.com/controller/func/params?id=999&method=67&info=547">teste 1 </a>
<a href="http://enderecodosite.com/controller/func/params?id=1106162&method=67&info=547">teste 2 </a>
<a href="http://enderecodosite.com/controller/func/params?id=65&method=67&info=547">teste 3</a>
CSS
.blackPane {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 999;
background-color: rgba(0, 0, 0, .5);
}
.modal {
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px -150px;
background-color: white;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
-o-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
p {
font: 14px/1.5"Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
text-align: center;
margin-top: 80px;
}
JavaScript
(function () {
var getUserID = function (url) {
/**
* Dado um URL, esta funcao vai procurar o ID do utilizador.
* desde que tenha o formato id=XXX
* Sendo X numeros.
*/
var reg = /id=[0-9]*/gi,
userId = reg.exec(url)[0].substr(3);
return userId;
},
openModalWindow = function (e) {
/**
* Cria uma Janela modal,
* Corre a funcao para ir buscar o ID do utilizador
* Escreve o ID do user na janela modal.
*/
e.preventDefault();
var ID = getUserID($(e.currentTarget).attr('href')),
blackPane = document.createElement('div'),
modal = document.createElement('div'),
$blackPane;
blackPane.setAttribute('class', 'blackPane');
modal.setAttribute('class', 'modal');
blackPane.appendChild(modal);
document.body.appendChild(blackPane);
$blackPane = $(blackPane);
$blackPane.find('.modal').html('<p>O ID do utilizador Ă©: ' + ID + '</p>');
};
$('body').delegate('a', 'click', openModalWindow);
}());