Este artigo descreve o método do JS+CSS para implementar uma bela camada pop-up de efeito especial de canto arredondado. Compartilhe para sua referência. Os detalhes são os seguintes:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> camada pop com belo efeito de canto arredondado implementado por JS+CSS </ititle>
<estilo>
corpo{
margem: 0px;
preenchimento: 0px;
Size da fonte: 14px;
}
#t {
Posição: Absoluto;
flutuar: esquerda;
Esquerda: 0px;
Top: 0px;
}
#a {
flutuar: esquerda;
}
.al {
Opacidade: 0,80;
Filtro: Progid: dIMAGETRANSForm.microsoft.alpha (style = 0, opacidade = 80, finalizoPacity = 100);
}
.al2 {
Opacidade: 0,00;
Filtro: Progid: dIMAGETRANSForm.microsoft.alpha (style = 0, opacidade = 0, finalizoPacity = 100);
}
U {
Exibição: bloco;
Estouro: oculto;
Altura: 1px
}
U.F1 {
Background-Color:#5CC;
Antecedentes: #5CC;
Margem: 0px 3px
}
U.F2 {
Background-Color:#5CC;
Fronteira: #5cc 2px Solid;
Margem: 0px 1px;
Border-Ift: #5cc 2px Solid
}
U.F3 {
Background-Color:#5CC;
Fronteira: #5cc 1px Solid;
Margem: 0px 1px;
Border-Ift: #5cc 1px Solid
}
.d_top {
claro: ambos;
estouro: oculto;
Background-Color:#5CC;
Altura: 29px;
Alinhamento vertical: inferior;
}
.d_top a {
Float: Certo;
Margin-top: 5px;
Margem-direita: 13px;
Top-top: 3px;
Largura: 18px;
Cor: vermelho;
Background-Color:#789;
Decoração de texto: Nenhum;
Peso da fonte: negrito;
Alinhamento de texto: centro;
Alinhamento vertical: meio;
}
.d_top span {
flutuar: esquerda;
Size da fonte: 13px;
margem-esquerda: 15px;
Margin-top: 8px;
}
.d_body {
Right-direita: #5cc 3px sólido;
Interação da borda: #5cc 3px sólido;
preenchimento: 10px;
Altura: 200px;
Background-Color: #ffff;
}
.d_foot {
claro: ambos;
estouro: oculto;
Background-Color:#5CC;
Altura: 2px;
}
</style>
<script type = "text/javascript">
função $ (id) {return document.getElementById (id);}
função show (id) {
var t = $ (id);
t.style.width = document.body.clientWidth;
t.style.Height = document.body.clientHeight;
window.onResize = function () {
t.style.width = document.body.clientWidth;
t.style.Height = document.body.clientHeight;
}
$ (id) .style.display = "";
}
função cl (id) {
$ (id) .style.display = "nenhum";
}
função movevent (e, id) {
var isie = (document.all)? true: false;
arrastar = true;
xx = isie? Event.x: e.pagex;
yy = isie? Event.y: e.pagey;
L = document.getElementById (id) .offsetLeft;
T = document.getElementById (id) .offSettop;
document.onMousEmove = function (e) {
se (arrastar) {
x = isie? Event.x: e.pagex; if (x <0) x = 0;
y = isie? Event.y: e.pagey; if (y <0) y = 0;
document.getElementById (id) .style.left = l-xx+x;
document.getElementById (id) .style.top = t-yy+y;
}
}
document.onmouseup = function () {
arrastar = false;
}
}
window.onscroll = function () {
$ ("back_div"). style.width = document.body.scrollwidth;
$ ("back_div"). style.height = document.body.scrolHeight;
}
</script>
</head>
<Body>
<div id = "a" style = "posição: absoluto; esquerda: 300px; topo: 200px;">
<a href = "javascript:" onclick = "show ('t')"> clique aqui para aparecer a div com o efeito de canto arredondado </a> </div>
<div id = "t" style = "display: nenhum;">
<div id = "back_div">
<iframe style = "Posição: absoluto; esquerda: 0px; topo: 0px; esquerda: 0px; inferior: 0px; float: esquerda; z-index: -1; margem: 0px; preenchimento: 0px;" frameborder = "0" rolling = "no" id = "ifr"> </frame>
</div>
<Div style = "largura: 500px; posição: absoluto; flutuação: esquerda; superior: 25%; esquerda: 30%; Z-Index: 999; claro: ambos; transbordamento: oculto;" id = "t_div">
<iframe style = "Posição: absoluto; esquerda: 0px; topo: 0px; esquerda: 0px; inferior: 0px; float: esquerda; z-index: -1; margem: 0px; preenchimento: 0px;" frameborder = "0" rolling = "no" id = "ifr"> </frame>
<u> </u> <u> </u> <u> </u>
<div onmousedown = "movevent (evento, 't_div')">
<span> Bem -vindo </span>
<a href = "javascript:" onclick = "cl ('t')"> × </a>
</div>
<div> Bem -vindo a: wulin.com
</div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.