JavaScript pop-up layer input box

Source: Internet
Author: User
Tags border color

  This article mainly introduces the JavaScript pop-up layer input box (sample code). Need friends can come to the reference, I hope to help you.

As follows: The code is:    <script language= "javascript" type= "Text/javascript" >          F Unction Alertwin (title, MSG, W, h) {                var titleheight = "22px";//Windows Port Header height               var bordercolor = "#666699"; Window border color               var titlecolor = "#FFFFFF"; Window title color               var titlebgcolor = "#666699"; Window title background color               var bgcolor = "#FFFFFF"; Content background color               var iwidth = document.documentElement.clientWidth; Width of this window               var iheight = document.documentElement.clientHeight; The height of this window                //Background layer format               var bgobj = document.createelement ("div");        &NBSp       BgObj.style.cssText = "Position:absolute;left:0px;top:0px;width:" + iwidth + "Px;height:" + Math.max (Document.body.clientHeight, iheight) + "Px;filter:alpha (opacity=30); Opacity:0.3;background-color: #000000; z-index : 1000; ";                 Document.body.appendChild (bgobj);        &NBSP ;       var iframe2 = document.createelement ("iframe");              Ifram E2.style.cssText = "Position:absolute; Top:0px;filter:alpha (opacity=30); Opacity:0.3;background-color: #000000; z-index:1001; Border-style:none; border-width:0px; Border:0px;width: "+ iwidth +" Px;height: "+ iheight +" px ";              BGOBJ.APPENDC Hild (iframe2);               //Create a popup level             & nbsp var msgobj = document.createelement ("div");             //Set up bulletsOut of the layer's style               MsgObj.style.cssText = "position:absolute;font:11px ' song Body"; Top: "+ (i HEIGHT-H)/2 + "Px;left:" + (IWIDTH-W)/2 + "Px;width:" + W + "Px;height:" + H + "px;text-align:center;border:1px so Lid "+ bordercolor +"; Background-color: "+ bgcolor +";p adding:1px;line-height:22px;z-index:1001; ";               Document.body.appendChild (msgobj);          &NBS P  //create a table to accommodate content on the layer               var table = document.createelement ("table"); nbsp            //place table on pop-up level               Msgobj.appendchil d (table);             //Set table format               tab Le.style.cssText = "margin:0px;border:0px;padding:0px;";               table.cellspacing = 0;        &NBSP    //Insert a row for display title               var tr = table.insertrow ( -1);    &nbs P        //Insert a cell to hold the title               var titlebar = Tr.insertcell (- 1);              TitleBar.style.cssText = "Width:100%;height:" + titleheight + "Px;text -align:left;padding:3px;margin:0px;font:bold 13px ' song body '; color: "+ Titlecolor +"; border:1px solid "+ bordercolor +"; curso R:move;background-color: "+ titlebgcolor;              TitleBar.style.paddingLeft =" 1 0px ";             /set title               Titlebar.inne RHTML = title;             //Setup Zeng Tak drag event               var MoveX = 0;              var Movey = 0;            &NB Sp var movetop = 0;              var moveLeft = 0;              var mo veable = false;              var docmousemoveevent = document.onmousemove;              var docmouseupevent = document.onmouseup;            &NB Sp Mouse click Title               Titlebar.onmousedown = function () {        &N Bsp         var evt = getEvent ();                  moveable = true;                  MoveX = evt.clientx;        &NBSP ;         Movey = evt.clienty;                  Movetop = P Arseint (msgObj.style.top);                  MoveLeft = parseint (msgobj.style . left);                //mouse drag                 &NBS P Document.onmousemove = function () {                      if (Moveab Le) {                          var evt = GetEvent (); &nbsp ;                         var x = moveLeft + Evt.clientx-movex ;                          var y = movetop + evt.clienty -movey;                          if (x > 0 && (x + W < iwidth) && y > 0 && (y + H < iheight)) {            &NBSP ;                 MsgObj.style.left = x + "px";          &N Bsp                   MsgObj.style.top = y + "px";            &NB Sp            }                     }& nbsp                };                  D Ocument.onmouseup = function () {                      if (moveable) {                          Document.onmousemove = Docmou semoveevent;                          Document.onmouseup = docmouseupevent;                          moveable = FA lse;                          MoveX = 0;    &NB Sp   &nbsp                 Movey = 0;                          Movetop = 0;                    &NBSP ;     MoveLeft = 0;                     }    &NB Sp            };             }               //Close button event               var closebtn = Tr.insertcell ( -1); &nbs P             CloseBtn.style.cssText = "cursor:pointer; Text-align:right;padding:2px;background-color: "+ titlebgcolor;              closebtn.innerhtml = "<span style= ' font-size:15pt;color:" + Titlecolor + "; ' >x</span> ";              Closebtn.onclick = function () {                  Document.body.removeChild (bgobj);      &NBSP ;           Document.body.removeChild (msgobj);             }&NB Sp              //Pop-up message window content               var msgBox = Table.insertrow ( -1). InsertCell ( -1);              MsgBox.style.cssText = "font:10pt" Song body '; ';               Msgbox.colspan = 2;              Msgbo x.innerhtml = msg;             /layer template name content             &N Bsp var namebox = Table.insertrow ( -1);              var namelable = Namebox.insertcell (-1);               NameLable.style.cssText = "font:12pt ' song Body"; text-align:center; ";              namelable.innerhtml = "<br/> input ID number:<br/>";          &NBS P   var nametext = Namebox.insertcell ( -1);              Nametext.style.cssText = "fo nt:12pt ' song body '; text-align:left; margin-left:0px ";              nametext.innerhtml =" <br/><input type= ' text ' Value= ' id= ' modalname '/>   <br/> ";             //Layer action button content   &NBSP ;           var submitbox = Table.insertrow ( -1);              VA R submitbtn = Submitbox.insertcell ( -1);              SubmitBtn.style.cssText = "Text-al Ign:center; ";               Submitbtn.colspan = 2;              SU bmitbtn.innerhtml = "<br/><input type= ' button ' value= ' OK ' id= ' saveheader ' onclick= ' return to GeTcark () '/><br/> ';              function getEvent () {      &NBS P           return window.event | | arguments.callee.caller.arguments[0];             }          }      </script>    <input type= "button" value= "Storage Header" onclick= "Alertwin (' Identity information collection ', ' 300,150); "/>    
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.