Cet article décrit la méthode de JS + CSS pour implémenter une couche pop-up à effet spécial à l'angle arrondi. Partagez-le pour votre référence. Les détails sont les suivants:
La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> Pop Layer avec un bel effet d'angle arrondi implémenté par JS + CSS </Title>
<style>
corps{
marge: 0px;
rembourrage: 0px;
taille de police: 14px;
}
#t {
Position: absolue;
flottant: à gauche;
gauche: 0px;
En haut: 0px;
}
#un {
flottant: à gauche;
}
.al {
Opacité: 0,80;
Filtre: PROGID: DxiageTransform.microsoft.alpha (style = 0, opacité = 80, fini finalOpacity = 100);
}
.al2 {
Opacité: 0,00;
Filtre: PROGID: DxiageTransform.microsoft.alpha (style = 0, opacité = 0, fini final = 100);
}
U {
Affichage: bloc;
Débordement: caché;
Hauteur: 1px
}
U.F1 {
Color d'arrière-plan: # 5cc;
Contexte: # 5cc;
Marge: 0px 3px
}
U.F2 {
Color d'arrière-plan: # 5cc;
Border-droite: # 5cc 2px solide;
Marge: 0px 1px;
Border-Left: # 5cc 2px solide
}
U.F3 {
Color d'arrière-plan: # 5cc;
Border-droite: # 5cc 1px solide;
Marge: 0px 1px;
Border-Left: # 5cc 1px solide
}
.d_top {
Clear: les deux;
débordement: caché;
Color d'arrière-plan: # 5cc;
hauteur: 29px;
Aligne verticale: en bas;
}
.d_top a {
flottant: à droite;
marge: 5px;
marge droite: 13px;
Tableau de rembourrage: 3px;
Largeur: 18px;
Couleur: rouge;
Color en arrière-plan: # 789;
Décoration du texte: aucune;
Police-poids: Bold;
Texte-aligne: Centre;
Adigne vertical: milieu;
}
.d_top Span {
flottant: à gauche;
taille de police: 13px;
marge-gauche: 15px;
marge: 8px;
}
.d_body {
Border-droite: # 5cc 3px solide;
Border-Left: # 5cc 3px solide;
rembourrage: 10px;
hauteur: 200px;
Color d'arrière-plan: #FFFF;
}
.d_foot {
Clear: les deux;
débordement: caché;
Color d'arrière-plan: # 5cc;
hauteur: 2px;
}
</ style>
<script type = "text / javascript">
fonction $ (id) {return document.getElementById (id);}
fonction 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 = "";
}
fonction cl (id) {
$ (id) .style.display = "Aucun";
}
fonction moveevent (e, id) {
var isie = (document.all)? true: false;
drag = 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 = fonction (e) {
if (drag) {
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 () {
drag = false;
}
}
window.onscroll = function () {
$ ("back_div"). style.width = document.body.scrollwidth;
$ ("back_div"). style.height = document.body.scrollHeight;
}
</cript>
</ head>
<body>
<div id = "a" style = "position: absolu; gauche: 300px; top: 200px;">
<a href = "javascript:" onclick = "show ('t')"> Cliquez ici pour faire apparaître le div avec l'effet d'angle arrondi </a> <a href = '// www.vevb.com/' Target = '_ Blank'> <u> Boîte de dialogue </ u> </a>! </div>
<div id = "t" style = "affichage: aucun;">
<div id = "back_div">
<iframe style = "Position: Absolute; Left: 0px; top: 0px; gauche: 0px; en bas: 0px; float: gauche; z-index: -1; marge: 0px; padding: 0px;" frameborder = "0" scrolling = "no" id = "ifr"> </ iframe>
</div>
<Div style = "width: 500px; position: absolu; float: gauche; top: 25%; gauche: 30%; z-index: 999; clair: les deux; débordement: caché;" id = "t_div">
<iframe style = "Position: Absolute; Left: 0px; top: 0px; gauche: 0px; en bas: 0px; float: gauche; z-index: -1; marge: 0px; padding: 0px;" frameborder = "0" scrolling = "no" id = "ifr"> </ iframe>
<u> </u> <u> </u> <u> </u>
<div onMoudown = "moveEvent (événement, 't_div')">
<span> bienvenue </span>
<a href = "javascript:" onclick = "cl ('t')"> × </a>
</div>
<v> Bienvenue à: wulin.com
</div>
<div> </div>
<u> </u> <u> </u> <u> </u>
</div>
</div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.