Javascript + Css 实现弹出窗体效果

整天效果图：

点击购买的链接，在页面中弹出一个div的提示框。

为实现这个效果，首先我们要使用div+css做出这个效果图。

 

 

/* CSS Document */
#register
{
    width:356px;
    height:235px;
}

#rleft
{
    width:10px;
    height:235px;
    background-image:url(img/left.gif);
    background-repeat:no-repeat    ;
    position:relative;
    float:left;
}

#rmiddle
{
    position:relative;
    background-image:url(img/bg.gif);
    background-repeat:repeat-x;
    background-position:top;
    width:334px;
    height:235px;
    float:left;
}

#close
{
    float:right;
    margin:5px;
}

#info
{
    margin:50px auto;
}
#note1
{
    text-align:center;
    font-family:"宋体";
    font-size:13px;
    font-weight:bold;
    padding:auto;
}

#note2
{
    text-align:center;
    font-family:"宋体";
    font-size:14px;
    font-weight:bold;
    color:#FF0000;
    padding:auto;
    margin:30px 0px 0px 0px;
}

#btn
{
    padding:40px 2px 20px 30px ;
    text-align:right;
    float:right;
}

#shopping
{
    position:relative;
    float:left;
    padding:0px 10px;
}

#buy
{
    position:relative;
    float:left;
    padding:0px 10px;
}

#rright
{
    position:relative;
    width:8px;
    height:235px;
    background-image:url(img/right.gif);
    background-repeat:no-repeat;
    float:left;
}

 

然后我们利用js来实现这个弹出效果

 

 

var docEle = function() 
 {
  return document.getElementById(arguments[0]) || false;
 }
 
 
 function showDialogue(title,content)
 {
  var newDiv = document.createElement("div");
  newDiv.id = "register";
  newDiv.style.position = "absolute";
  newDiv.style.zIndex = "9999";
  newDiv.style.width = "357px";
  newDiv.style.height = "235px";
  newDiv.style.top = "150px";
  newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中

  document.body.appendChild(newDiv);
  
  var rleft = document.createElement("div");
  rleft.id = "rleft";
  newDiv.appendChild(rleft);
  
  var rmiddle =document.createElement("div");
  rmiddle.id= "rmiddle";
  newDiv.appendChild(rmiddle);
  
  var rclose =document.createElement("div");
  rclose.id= "close";
  rmiddle.appendChild(rclose);

  var rimg =document.createElement("img");
  rimg.src="img/close.gif";
  rimg.onclick = function(){
        document.body.removeChild(docEle("register"));
  };
  
  rimg.onmouseover = function(){
        this.style.cursor="hand";
  };
  rclose.appendChild(rimg);
  
  var info =document.createElement("div");
  info.id="info";
  rmiddle.appendChild(info);

  var note1 =document.createElement("div");
  note1.id="note1";
  note1.innerHTML=title;
  info.appendChild(note1);
  
  var note2 =document.createElement("div");
  note2.id="note2";
  note2.innerHTML=content;
  info.appendChild(note2);

  var btn =document.createElement("div");
  btn.id="btn";
  rmiddle.appendChild(btn);
  
  var shopping =document.createElement("div");
  shopping.id="shopping";
  btn.appendChild(shopping);
  
  var shoppingBtn =document.createElement("input");
  shoppingBtn.type="image";
  shoppingBtn.src="img/btn_shopping.jpg";
  shoppingBtn.name="shopping";
  shopping.appendChild(shoppingBtn);
  
  var buy =document.createElement("div");
  buy.id="buy";
  btn.appendChild(buy);
  
  var buyBtn =document.createElement("input");
  buyBtn.type="image";
  buyBtn.src="img/btn_buy.jpg";
  buyBtn.name="buy";
  buyBtn.onclick  = function(){
      window.location="1.html";
  };
  buy.appendChild(buyBtn);
  
  var rright =document.createElement("div");
  rright.id= "rright";
  newDiv.appendChild(rright);
  
  var cleardiv =document.createElement("div");
  cleardiv.style.clear ="both";
  newDiv.appendChild(cleardiv);  
 }

 

这个时候我们再在页面中加个链接就可以叻

 

<a href="#" onclick="showDialogue('购物提示','你选中的产品已经成功放入购物车!');return false;">购买</a>

 

 

附上源码一份：

https://files.cnblogs.com/Caceolod/buy.rar