Make your own friendly page "confirmation Dialog"

Source: Internet
Author: User
Tags exit continue blank page
dialog box | When the page is on the Internet, you often experience this: when you click on a link on a page, a confirmation dialog box with a "OK" and "exit" button appears with a warning, welcome or note, prompt, copyright, and so on (Figure 1): If you choose OK, it will continue to be loaded on the target page, if you select "Exit" Will not continue, thus giving the viewer a chance to back out.


Figure 1


This is most commonly done through the following JavaScript code in HTML between "
<script language= "JavaScript" >

function Rusure ()

{

Question = Confirm ("# #")///# #为 "content of related information"

if (question!= "0")

{

window.open ("URL of target page", "Test Bulletin Window", "width=340,height=163");///Custom Confirmation dialog box size and target page

}

}

</script>

Do you feel a bit like this if you are also making "leaves" enthusiastically? DIY a bar! The following (Figure 2) is the one I tried to customize with the page. The procedure is: first to be used as a button text or picture hyperlink to the target page, its HTML source code is: <a Href= "#" Onclick=window.open ("target page R url", "List", "scrollbars=no,resizable= No,left=100,top=80,width=300,height=80 ") > picture URL or text </a>. The third double quotation mark in parentheses after "Onclick=window.open" defines the height and width of the new window, and does not display the toolbar, menu bar, and scroll bar but only one title bar. However, it is particularly noteworthy: "Href=" after the double quotation mark must be a #; and then use one of the following two methods to implement the confirmation dialog box DIY:

1, the use of Web page production software to do, the production process is as follows:

(1) Run your familiar web production software (such as FrontPage, Dreamwaver, etc.), create a new blank page, enter information text and set to center;

(2) Insert a second row into a 1 Row 3 column table, set the table width, edge width, and cell spacing equal to 0, and set the width of the 1th and 3 cells to be the appropriate pixel (I'm using 80) and set the middle cell width to 10 pixels (no text is entered in the grid). The goal is to have two buttons with a 10 pixel interval);

(3) Enter the word "OK" in the 1th cell, set the ScreenTip and set the hyperlink (note that the target frame is set to a new window); Enter the word "exit" in cell 3rd, set up the ScreenTip and set the hyperlink (because it closes this window, so notice that you type "in the hyperlink Address bar" Javascript:window.close () ").

2, the HTML language method, its setting is as follows:

(1), write the following statement between <body> and </body> on the target page:

<p align= "Center"

<font face= "Some font" color= "Song Body Color" size= "Font size" > <b> Set related information text </b> </font> </p>


Figure 2

(2) Write the following statement between <body> and </body>:

<center>

<table border= "0" cellpadding= "3" cellspacing= "0" style= "border-collapse:collapse"

<tr>

<TD width= "align=" "Center" bgcolor= "#C0C0C0"

<font face= "Song Body"

<a Style= "FONT-SIZE:10PT; COLOR: #000000 "target=" _blank "title=" to the "OK":-) href= "01.htm" > OK </a> </font>

</td>

<TD width= "Ten" align= "center" > </td>

<TD width= "align=" "Center" bgcolor= "#C0C0C0"

<font face= "Song Body"

<a Style= "FONT-SIZE:10PT; COLOR: #000000 "title=" regret it? Exit "OK:-)" href= "Javascript:window.close ()" > exit </a> </font> </td>

</tr>

</table>

</center>

Code description: "<table ... > </table> the label customizes a one-row, three-column table and restricts the table to the center by "<center> </center>", the first cell label "<TD ..." > </td> Customize the properties such as 80 pixel width, center, gray cell background color and so on, and customize the font that determines the button word, the new window opens the target page and the mouse pointer to the button to determine the message, etc. the third cell label "<TD ... > </td> Customize the same cell properties as the first cell, and then close the window with the "Javascript:window.close ()" command by customizing the font that exits the button word, the prompt when the mouse points to the Exit button, and clicking the Exit button.



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.