JS Popup box

Source: Internet
Author: User
Tags border color

1. Alert (msg)

2, confirm (msg): Returns a Boolean

function disp_confirm ()  {  var r=confirm ("Press a Button")  if (r==true)    {    document.write ("You pressed ok!" )    }  else    {    document.write ("You pressed cancel!" )    }  }

3, http://www.cnblogs.com/sofiawang/articles/1544631.html

window.open (' page.html ')

window.open (' page.html ', ' newwindow ', ' height=100, width=400, Top=0, left=0, Toolbar=no, Menubar=no, Scrollbars=no, Resizable=no,location=no, Status=no ')//This sentence should be written in one line

<script language= "javascript" > JS script start;
window.open the command that pops up the new window;
The filename of the ' page.html ' pop-up window;&NBSP; the name of the
' NewWindow ' popup (not the file name), non-mandatory, available null ' instead;  &NBSP;
height=100 window height;  &NBSP;
width=400 Window width,  &NBSP;
top=0 window from the pixel value above the screen;  &NBSP;
left=0 window is the pixel value from the left side of the screen;   Toolbar=no whether the toolbar is displayed, yes is displayed,  &NBSP;
Menubar,scrollbars Represents the menu bar and scroll bar.  &NBSP;
Resizable=no is allowed to change window size, yes is allowed;  &NBSP;
Location=no whether the address bar is displayed, yes is allowed;   
Status=no whether to display the information in the status bar (usually the file is already open), yes to allow,  &NBSP;
</SCRIPT> JS script end

4. Customize the bullet box and close

//Optimization: Sets the setting to option, passed as a parametervarOption ={MSGW:350, MSGH:80, Titleheight:25, BorderColor:' #336699 ', Titlecolor' #99CCFF '};/** * Customize the Bullet box and close * Tips: Hint info * Options: Set * Timeout: Timeout * callback: Action after closing window*/functionAlert (Tips,option,timeout,callback,) {varMsgw,msgh,bordercolor; MSGW= 350;//width of the hint windowmsgh=80;//height of the prompt windowTitleheight=25//Tip Window Caption HeightBordercolor= "#336699";//the border color of the hint windowTitlecolor= "#99CCFF";//title color of the hint window    varSwidth,sheight; //get the current window sizeSwidth =Document.body.offsetWidth; Sheight=Document.body.offsetHeight; ////Background div    varBgobj=document.createelement ("div"); Bgobj.setattribute (' id ', ' alertbgdiv '); BgObj.style.position= "Absolute"; BgObj.style.top= "0"; BgObj.style.background= "#E8E8E8"; BgObj.style.filter= "Progid:DXImageTransform.Microsoft.Alpha (style=3,opacity=25,finishopacity=75"); BgObj.style.opacity= "0.6"; BgObj.style.left= "0"; BgObj.style.width= Swidth + "px"; BgObj.style.height= Sheight + "px"; BgObj.style.zIndex= "10000";      Document.body.appendChild (Bgobj); //Create a div for the cue window    varMsgobj = document.createelement ("div") Msgobj.setattribute ("id", "alertmsgdiv"); Msgobj.setattribute ("Align", "center"); MsgObj.style.background= "White"; MsgObj.style.border= "1px solid" +bordercolor; MsgObj.style.position= "Absolute"; MsgObj.style.left= "50%"; MsgObj.style.font= "12px/1.6em Verdana, Geneva, Arial, Helvetica, Sans-serif"; //distance from left and top of windowMsgObj.style.marginLeft = " -225px"; //window is rolled away high + (screen available working area high/2) -150MsgObj.style.top = document.body.scrolltop+ (WINDOW.SCREEN.AVAILHEIGHT/2) -150 + "px"; MsgObj.style.width = MSGW + "px"; MsgObj.style.height= MSGH + "px"; MsgObj.style.textAlign= "Center"; MsgObj.style.lineHeight= "25px"; MsgObj.style.zIndex= "10001";      Document.body.appendChild (Msgobj); //Tip Information Title    varTitle=document.createelement ("H4"); Title.setattribute ("id", "alertmsgtitle"); Title.setattribute ("Align", "left"); Title.style.margin= "0"; Title.style.padding= "3PX"; Title.style.background=bordercolor; Title.style.filter= "Progid:DXImageTransform.Microsoft.Alpha (startx=20, starty=20, finishx=100, finishy=100,style=1,opacity=75, FINISHOPACITY=100); "; Title.style.opacity= "0.75"; Title.style.border= "1px solid" +bordercolor; Title.style.height= "18px"; Title.style.font= "12px Verdana, Geneva, Arial, Helvetica, Sans-serif"; Title.style.color= "White"; Title.innerhtml= "Prompt Message"; document.getElementById ("Alertmsgdiv"). appendchild (title); //Prompt Information    vartxt = document.createelement ("P"); Txt.setattribute ("id", "msgtxt"); Txt.style.margin= "16px 0"; Txt.innerhtml=tips; document.getElementById ("Alertmsgdiv"). appendchild (TXT); //Set shutdown timeWindow.settimeout ("Closewin (" +callback+ ")", timeout); }  functionClosewin (callback) {Document.body.removeChild (document.getElementById ("Alertbgdiv")); document.getElementById ("Alertmsgdiv"). RemoveChild (document.getElementById ("Alertmsgtitle").)); Document.body.removeChild (document.getElementById ("Alertmsgdiv"));    Callback (); }

5. Modal and non-modal windows

The window.showModalDialog () method is used to create a modal dialog box that displays HTML content.
The Window.showmodelessdialog () method is used to create a non-modal dialog box that displays HTML content.

How to use:

Vreturnvalue = window.showModalDialog (sURL [, varguments] [, Sfeatures])
Vreturnvalue = Window.showmodelessdialog (sURL [, varguments] [, Sfeatures])

Parameter description:

sURL --Required parameter, type: String. Used to specify the URL of the document to be displayed by the dialog box.

varguments --optional parameter, type: Variant. Used to pass parameters to the dialog box. There are no limits on the types of arguments passed, including arrays. The dialog box uses window.dialogarguments to get the arguments passed in.

sfeatures --optional parameter, type: String. Used to describe the appearance of the dialog box and other information, you can use the following one or several, with a semicolon ";" Separated.

----------------
1. Dialogheight: Height of dialog box, not less than 100px
2. Dialogwidth: Width of the dialog box.
3. Dialogleft: Distance from the left of the screen.
4. Dialogtop: Distance from the screen.
5. Center: {yes | no | 1 | 0}: Center, default yes, but can still specify height and width.
6. Help: {yes | no | 1 | 0}: Whether to display the Assist button, default yes.
7. Resizable: {yes | no | 1 | 0} [ie5+]: Whether the size can be changed. Default No.
8. Status:{yes | no | 1 | 0} [ie5+]: Whether the status bar is displayed. Default is yes[Modeless] or no[modal].
9. scroll:{Yes | no | 1 | 0 | on | off}: Scroll bar is displayed. The default is yes.

Parameter passing:

1. To pass a parameter to a dialog box, pass it through varguments. Type is not limited, for string types, the maximum is 4,096 characters. You can also pass objects, for example:


<script>
var obj = new Object ();
Obj.name= "51js";
window.showModalDialog ("modal.htm", obj, "dialogwidth=200px;dialogheight=100px");
</script>
Modal.htm
<script>
var obj = window.dialogarguments
Alert ("You passed the parameter:" + obj.name)
</script>

2. You can return information by Window.returnvalue to the window that opens the dialog box, or it can be an object. For example:

<script>
Str =window.showmodaldialog ("modal.htm",, "dialogwidth=200px;dialogheight=100px");
alert (str);
</script>
Modal.htm
<script>
Window.returnvalue= "Http://www.jb51.net";
</script>

JS Popup box

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.