简单js弹出div

最新推荐文章于 2025-11-05 20:48:02 发布

转载最新推荐文章于 2025-11-05 20:48:02 发布 · 720 阅读

文章标签：

#div #dialog #stylesheet #button #function #xhtml

js 专栏收录该内容

5 篇文章

订阅专栏

test.html

------------------------------------

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!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">
<head runat="server">
     <title>Untitled Page</title>
     <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="js/JScript.js"></script>
</head>
<body>
     <form id="form1" runat="server">
     <div>
         <input id="Button1" type="button" value="button" onclick="popUp('d1',false);" />

     </div>
     </form>
</body>
</html>

js/javascript.js

------------------------------------------------------------

// JScript File
function popUp(id,isModal)
{
    var dialog=document .createElement("div");
    dialog .className="dialog";
    dialog .id=id;
    dialog .ico=document .createElement("img");
    dialog .ico.className="dialog_icon";
    dialog .ico .dialog=dialog;
    dialog .ico.onclick=hideDialog;
    dialog.ico.setAttribute("src","imgs/close.gif");
    dialog .appendChild(dialog .ico);
    if(isModal)
    {
    dialog .modalLayer=document .createElement("div");
    dialog .modalLayer.className="modal";
    dialog .modalLayer.appendChild(dialog);
    document .body .appendChild(dialog .modalLayer);
    dialog.modalLayer.style.display='block';
    }
    else
    {
    dialog .className+=' non-modal';
    document .body .appendChild(dialog);
    }
}
function hideDialog(e)
{
var dialog=this.dialog;
if(dialog)
{
   if(dialog .modalLayer)
   {
   dialog .modalLayer.style.display='none';
   }
   else
   {
   dialog .style.display='none';
   }
}
}

css/stylesheet.css

-------------------------------------------------------------------

body
{
    background-color:Blue;
}
.dialog
{
     position: fixed;
     width: 300px;
     height: 200px;
     border: solid black 1px;
     top: 100px;
     left: 150px;
     background-color:Orange;
}
.modal
{
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
     filter: Alpha(opacity=90);
     background-color: White;
}
.non-modal
{
}
.dialog_icon
{
     float: right;
     right: 0px;
     width: 44px;
     height: 18px;
      cursor:hand;
}