Menu
homeExcel

Base confirm html. JavaScript and dialog boxes: alert, confirm, prompt

HTML, XHTML and CSS 100% Kvint Igor Method confirm()

confirm() method

The confirm() method displays a confirmation window, which is similar to the alert window generated by the alert() method, but contains two buttons: OK and Cancel. Listing 11.3 demonstrates creating a confirmation window, but this script does not differentiate between the OK and Cancel buttons. Pressing any of the buttons will simply close the window (Fig. 11.5).

Rice. 11.5.

Working with confirmation

Listing 11.3.

Working with confirmation

Working with confirmation

confirm("This is my confirmation");

After reading this chapter, you will learn how to use this method to make your script respond differently when you click the OK and Cancel buttons.

From the book Windows Script Host for Windows 2000/XP by Andrey Vladimirovich Popov Run method The intWindowStyle parameter sets the window type for the application to be launched (Table 1.13).Table 1.13. Window types (intWindowStyle) Parameter Visual Basic Constant Description 0 vbHide Hides the current window and activates another window (shows it and gives it focus) 1 vbNormalFocus Activates and From the book Programming in

Ruby language

[Ideology of language, theory and practice of application] by Fulton Hal

Delete Method If the force parameter is false or not specified, then using the Delete method it will not be possible to delete a directory with a read-only attribute. Setting force to true will allow such directories to be deleted immediately. When using the Delete method, it does not matter whether the specified

From the book Programming PDAs and Smartphones on the .NET Compact Framework by Klimov Alexander P.

Move method The required destination parameter specifies the directory to which the move will be made; wildcards are not allowed in a directory name. Note Instead of the Move method, you can use the MoveFolder object method From the book Linux and UNIX: shell programming. Developer's Guide. by Tainsley David

Copy method The required destination parameter specifies the file to which the copy will be made; wildcards are not allowed in a file name. The overwrite parameter is a Boolean variable that determines whether to overwrite an already

Delete Method If the force parameter is false or not specified, then using the Delete method it will be impossible to delete a file with a read-only attribute. Setting force to true will allow such files to be deleted immediately. Note You can use the DeleteFile method instead of the Delete method.

From the author's book

8.3.1. The inject method The inject method came to Ruby from the Smalltalk language (it first appeared in Ruby 1.8). Its behavior is interesting, although it is not easy to understand the first time. It reflects the fact that we often want to go around the list and “accumulate” some result along the way. Of course, the most

From the author's book

8.3.3. Partition method As they say, “there are two types of people in the world: those who divide people into different types, and those who do not.” The partition method does not refer to people (although we can represent them as objects in Ruby), but it also divides the set into two parts. If a block is given when partition is called, then it is evaluated

From the author's book

11.1.10. initialize_copy method When copying an object using the dup or clone method, the constructor is not called. All state information is copied. But what if you don’t need this behavior? Let's look at an example: class Document attr_accessor:title, :text attr_reader:timestamp def initialize(title, text) @title, @text = title, text @timestamp =

From the author's book

11.1.11. The allocate method It is rare, but it happens that you need to create an object without calling its constructor (bypassing the initialize method). For example, it may be that the state of an object is determined entirely by its access methods; then there is no need to call the new method (which will call initialize) unless you

From the author's book

11.3.2. const_get method The const_get method gets the value of a constant from given name from the module or class it belongs to.str = "PI"Math.const_get(str) # Value is Math::PI. This is a way to avoid calling the eval method, which is sometimes considered inelegant. This approach is cheaper from a point of view

From the author's book

11.3.5. Method define_method Besides keyword def, the only one normal way to add a method to a class or object - use the define_method method, and it allows you to do this at run time. Of course, in Ruby almost everything happens at run time. If

From the author's book

11.3.6. const_missing method The const_missing method is similar to the method_missing method. When trying to access an unknown constant, this method is called - if it is defined, of course. As a parameter, it is passed a symbol referencing a constant. To intercept calls to

From the author's book

Lockbits Method The .NET Compact Framework 2.0 introduced limited support for the LockBits method, which can be used to manipulate an array of image pixels. The ImageLockMode enumeration in this method allows the values ​​ReadWrite, ReadOnly, and WriteOnly. And the PixelFormat enumeration supports

From the author's book From the author's book

Method Zip Description of methods Methods are given for the sequence sequence of T. function Zip(second: sequence of TSecond; resultSelector: (T,TSecond)->Res): sequence of Res; Concatenates two sequences using specified function

From the author's book

, taking one element of each sequence and

Method Contains Description of methods Methods are given for the sequence sequence of T. function Contains(value: T): boolean; Determines whether the specified element is contained in the sequence, using the default equality comparator. function Contains(value: T; comparer: IEqualityComparer): boolean; There are three in JavaScript

basic operations

, which allow you to receive data from the user for further processing in scripts. These are alert, prompt and confirm. What they are used for, how to use them and other nuances will be discussed later in this article.

alert

Used to display a modal window on the browser screen (this means that the user cannot click anything on the page until he closes this window. In this example, until he clicks “OK” in the window).

After the message contained in the alert is displayed, the execution of the script is suspended and resumed after the modal window is closed.

  • If the field is filled out and OK is clicked, the information entered by the user will be returned to the script.
  • The syntax of this command is somewhat more complicated than the previous one, since it allows you to set the text of the message to the user and the contents of the field for entering information, which will be displayed by default: result = prompt(title, default ) ;

    , Where

title – a message that will be displayed to the user in a modal window. The argument is required.

var year = prompt("What year did you graduate from university?", 2008);

alert("You are a graduate of " + year + " year!" ) ; Usually this command

used to collect data from users that the script needs to continue further work.

confirm

Also represents a modal window. As you might guess from the name, it is usually used to coordinate something with the user.

This is why it is designed for interaction, it provides the user with OK and CANCEL buttons, which return the Boolean values ​​true and false to the script, respectively. Ratings: 4 (average 4 out of 5) Continuing our series of educational articles on beauty guidance and management standard settings browsers, today we invite you to develop a cross-browser confirmation dialog with an easy-to-use jQuery plugin

. You can select text, buttons, and actions that will be performed after a click.

HTML code While we should initially focus on the confirmation window, first let's tell you a little about the page we'll be using. If you want to see source

plugin, you can skip this step and scroll down to the part of the article that talks about jQuery.


Index.php

A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo

At the top of the document we've included the Cuprum font from , jQuery.confirm.css (cascading style sheets for the dialog box), and styles.css - the cascading style sheets of our page. At the very bottom of the document body we have included jQuery library

, jquery.confirm.js (the main plugin file), as well as script.js, which listens for the button click event and runs the plugin. In the final step of our tutorial today, we will tell you about these two files.

To include a confirmation window in your website, you will need to copy the jquery.confirm folder from the downloaded archive, and include jquery.confirm.css in the head of the code, as well as the jquery.confirm.js file before the tag that ends the body of the document + jQuery library.

The dialog itself is nothing more than a couple of lines of HTML code. Below you can see the code inserted by the plugin to display the dialog box.

The code is added to the body of the document. confirmOverlay is displayed on top of the rest of the page, which prevents any interaction with page elements while the dialog box is displayed. h1, p and div confirmButtons are arranged in accordance with the structure specified in the plugin settings. Later in the article you will learn more about this.

CSS code

The design of the dialog box is contained in the jquery.confirm.css file. This greatly simplifies the integration process into existing finished project, and the styling is done in such a way that you can be sure that the styles will not mix with those already on the page.

jquery.confirm.css

#confirmOverlay(
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:url("ie.png");
background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
z-index:100000;
}

#confirmBox(
background:url("body_bg.jpg") repeat-x left bottom#e5e5e5;
width:460px;
position:fixed;
left:50%;
top:50%;
margin:-130px 0 0 -230px;
border: 1px solid rgba(33, 33, 33, 0.6);

Moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

#confirmBox h1,
#confirmBox p(
font:26px/1 "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;
background:url("header_bg.jpg") repeat-x left bottom #f5f5f5;
padding: 18px 25px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
color:#666;
}

#confirmBox h1(
letter-spacing:0.3px;
color:#888;
}

#confirmBox p(
background:none;
font-size:16px;
line-height:1.4;
padding-top: 35px;
}

#confirmButtons(
padding:15px 0 25px;
text-align:center;
}

#confirmBox .button(
display:inline-block;
color:white;
position:relative;
height: 33px;

Font:17px/33px "Cuprum","Lucida Sans Unicode", "Lucida Grande", sans-serif;

Margin-right: 15px;
padding: 0 35px 0 40px;
text-decoration:none;
border:none;
}

#confirmBox .button:last-child( margin-right:0;)

#confirmBox .button span(
position:absolute;
top:0;
right:-5px;
background:url("buttons.png") no-repeat;
width:5px;
height:33px
}

#confirmBox .blue( background-position:left top;text-shadow:1px 1px 0 #5889a2;)
#confirmBox .blue span( background-position:-195px 0;)
#confirmBox .blue:hover( background-position:left bottom;)
#confirmBox .blue:hover span( background-position:-195px bottom;)

#confirmBox .gray( background-position:-200px top;text-shadow:1px 1px 0 #707070;)
#confirmBox .gray span( background-position:-395px 0;)
#confirmBox .gray:hover( background-position:-200px bottom;)
#confirmBox .gray:hover span( background-position:-395px bottom;)

This takes advantage of the new CSS3. In the #confirmOverlay definition, we use CSS3 gradations (which only work in Firefox, Safari, and Chrome) with fallback provided in the form of a transparent PNG.

Next, in the #confirmBox located in the center of the display, we added inner shadow block (something similar to the inner glow in Photoshop). We also used the Cuprum font, which was added from Google's font directory.

Along with the text shadows, you can see the button styling. They are implemented using sliding doors. On this moment There are two types of designs available - blue and gray. You can add new color buttons by adding new declarations to the code.

jQuery

Before we jump into the plugin's source code, let's first look a little further. In script.js you can see the plugin running.

Script.js

$(document).ready(function())(

$(".item .delete").click(function())(

Var elem = $(this).closest(".item");

$.confirm((
"title" : "Delete Confirmation",
"message" : "You are about to delete this item.
It cannot be restored at a later time! Continue?"
"buttons" :(
"Yes" :(
"class" : "blue",
"action": function())(
elem.slideUp();
}
},
"No" :(
"class" : "gray",
"action": function()() // Nothing to do in this case. You can as well omit the action property.
}
}
});

When div .deleted is clicked in our example, the script executes the plugin-defined $.confirm function. The following is the title of the dialog box, a description, and an object with buttons. Each button has a CSS class name as well as an action parameter. An action is a function that runs when a button is clicked.

Now let's get to the interesting part. In jquery.confirm.js you can see the source code of our dialog.

Jquery.confirm.js

$.confirm = function(params)(

If($("#confirmOverlay").length)(
// A confirm is already shown on the page:
return false;
}

Var buttonHTML = "";

// Generating the markup for the buttons:

If(!obj.action)(
obj.action = function())(;
}
});

Var markup = [
"

",params.title,"",
"

",params.message,"

",
"

",
buttonHTML,
"

"
].join("");

$(markup).hide().appendTo("body").fadeIn();

Var buttons = $("#confirmBox .button"),
i = 0;

$.each(params.buttons,function(name,obj)(
buttons.eq(i++).click(function())(

// Calling the action attribute when a
// click occurs, and hiding the confirm.

Obj.action();
$.confirm.hide();
return false;
});
});
}

$.confirm.hide = function())(
$("#confirmOverlay").fadeOut(function())(
$(this).remove();
});
}

Our plugin defines a $.confirm() method. This method processes the data you entered, constructs the markup, and then adds it all to the page. Since the #confirmOverlay div has a fixed position via CSS declaration, we'll leave the process of centering it to the browser and then moving it as the user scrolls the page.

After adding the markup, the script distributes event levers for button click events, performing the action corresponding to the button pressed.

This concludes our dialog box!

Let's summarize

You can edit appearance dialog box via the jquery.confirm.css file. Since the message attribute in the dialog box uses HTML code, you can add images or icons there.

You can even use a plugin to implement error message boxes - you just need to add a single button without an action attribute set.

Attention! You do not have permission to view hidden text.

In this article, we will learn three interesting methods, namely alert(), confirm() and prompt() methods. They are all designed to interact with the user.

All these three methods belong to the window object (Browser Window). And they can be called like this: window.method_name(); But JavaScript allows us not to specify this window object, but to simply write the name of the method.

We'll start with the alert() method. This method displays the specified message in the user's browser window. This window will appear on top of the entire page, and until the user clicks on the OK button, it will not close.

To demonstrate, let's display a message using the alert() method.

Var today_is = "Monday"; alert("Today " + today_is);


Inside the method we can specify any string, but without html tag ov. They are not processed here, but are displayed as is.

If the string we want to specify is very long and we want to jump to new line, then here is the html tag
won't work. Here you need to use the "\n" character.

Alert("Loooooooooong \nStringgggggg");


This method is often used to find errors in code.

The code processing process goes from top to bottom, so to catch an error, we simply write the alert() method in the expected area where the error is located. And if alert() worked, then there are no errors up to the line where it is written.

Next, you need to move it one line or more below. We save the changes, refresh the page in the browser again, and see if the alert() worked, then there are no errors up to the line where it is located, otherwise, if it did not work, the error is located in the line above the line where it is currently located . This is how you can find an error in the code.

confirm() method

This method is used to confirm the answer to a question. There are only two answer options, yes (OK) or no (Cancel). If the user answers yes, then the method returns true, otherwise it returns false.

For example, we will display a window using the confirm() method, where we will ask the user “Are you sure you want to leave the page?” If the user answers yes, then through the alert() method we will display the following message “The user wants to leave the page”, otherwise we will display another message “The user does NOT want to leave the page”.

Var user_answer = confirm("Are you sure you want to leave the page?"); if(user_answer) alert("The user wants to leave the page"); else alert("The user does NOT want to \nleave the page");


This is how the confirm() method works. It can be used in different cases. For example, before removing something from a site, it is customary to ask the user if he is confident in his actions. Or, before sending the form, you can also ask the user “Did you fill out everything correctly?” If he answers yes, then the form will be sent, otherwise it will not be sent.

prompt() method

The last method we will learn is the prompt() method. This method is used less frequently than the other two methods. It allows you to receive some information from the user, which he will enter into a text field.

As a result, the prompt() method returns either the entered string if the user clicked the OK button, or null if the user clicked the cancel button.

As a parameter, that is, inside the brackets this method we can write a guide line or a question to let the user know what information to enter.

For example, let's ask the user to answer the question "What is your name?" The name entered by the user will be displayed on the screen using the alert() method.

Var name = prompt("What is your name?"); alert("Your name is " + name);

Save and open the page in the browser.


Of course, you can enter any information into the text field from the prompt() method. This information will be returned as a string, even in the case of numbers or other special characters.

For example, let's ask the user to enter two numbers and then multiply them. There will be some kind of calculator for multiplying numbers.

Var x = prompt("Enter the first number:"); var y = prompt("Enter the second number:"); //Convert the entered numbers from string type to numeric type x = Number(x); y = Number(y); document.write(x + " * " + y + " = " + (x * y));

The numbers entered are strings, so for correct result multiplication, you need to pass these numbers through the Number() function, which converts them from string type to normal numbers.

Well, that's all. Now you know three more methods: alert(), confirm() and prompt(). Which you can safely use in practice.

I talked about “template” modal windows. Those. those for which separate template files are created. And the complexity and sophistication of these windows can be limitless.

But often, to communicate with the user you need very simple dialog boxes- simply display some message with a single “Ok” button, which he cannot help but notice, or ask him for confirmation of some action.

Websites often use System functions for such purposes.
There are several groups of so-called “system” functions in the engine. The files containing these functions are loaded at the very beginning of the engine, even before the configuration files are loaded, and the functions themselves are not tied to any module and can be used anywhere, in any component - in modules, actions, mappers, etc." class="term">system functions alert() , confirm() and prompt() . Something like this:
Delete everything!
This works in any browser, but the windows that are displayed by such functions look ugly, primitive and break all the beauty that we bring to our site.

To solve this problem in the engine now you can (I would say it is necessary) to use analogues:

ls.modal.alert(options) - displaying an information window with one “OK” button
ls.modal.confirm(options) - displays a window with the “Cancel” and “Confirm” buttons
ls.modal.prompt(options) - window with an input field

In all functions, the options parameter can be either a string or an object. For example:
ls.modal.alert(‘Hello, world!’);
This code displays a modal window with the text “Hello, world!”

and the “Ok” button. And most importantly, this window will be designed exactly the same as all other modal windows on your site.
ls.modal.alert((title: "I say", text: "Hello, world!", onConfirm: function())( // the user clicked the Ok button)));

Here the window title “I say” is added and when the button is clicked, the function passed in the onConfirm parameter will be executed.
But that is not all! We can display any HTML code in the body of the window: var htmlCode = "

Here is your new avatar"; ls.modal.alert((title: "Avatar", html: htmlCode)); And we get something like this:

Note that the html parameter is used to display the HTML code, not the text parameter (if you pass both parameters, text will be used and html will be ignored). The ls.modal.confirm() and ls.modal.prompt() functions are used similarly. But in these functions it is possible Extra options
. For example, in the parameters of the ls.modal.confirm() function we can pass not one, but two handlers - one handler for each button:
ls.modal.confirm((title: "Delete", text: "Delete everything?", onConfirm: function())( // the user clicked the "Confirm" button), onCancel: function())( // the user clicked "Cancel" button ) ));
The ls.modal.prompt() function is used to prompt the user for some value. And we can set this as a default: ls.modal. prompt ((title: "Enter a number", text: "Enter a number here", value: 123 onConfirm: function(value)( // Entered value in the variable The general variable name scheme is as follows: Prefix+AdditionalPrefix+VariableName+Suffix. Variable names contain letters upper and lower case and begin with a lower case prefix indicating the data type of the variable's value. The list of prefixes recommended for use is given below. The additional prefix specifies the value of the variable and is selected from the list of recommended additional prefixes listed below. The variable name consists of one or more words that describe the semantic meaning of this variable, and is written in raised case. Since prefixes describe the value type of a variable, its name describes the instance

of this type
in the singular. The suffix complements the variable name and specifies its semantic meaning. The list of suffixes recommended for use is given below. Numbers in the name are allowed, but not recommended. The underscore is not used in the name.
Prefixes
The following list of prefixes is recommended for use:
- e (entity) - an object of Entity type and inherited from it;
- i (integer) - integer value;
- f (float) - value real type;
- m (mapper) - an object of the Mapper type and inherited from it;
- n (number) - value of undefined digital type, which can take both an integer and
real value. Requires checking for type value when used.

- o (object) - an object of a type different from Mapper and Entity;
- s (string) - string value;
- x (miXed) - object of mixed type. Requires checking for type value when used.

The following list of additional prefixes is recommended for use:
- Min (minimum) - minimum value;
- Max (maximum) - maximum value;
- Current - current value.

Suffixes
Unlike Additional Prefixes, suffixes specify the semantic meaning of the variable name, not its
meaning. The following list of suffixes is recommended for use:
- First - the first value from available list;
- Last - last value from the available list;
- Limit - limit value from the available list;
- Tmp - temporary value;
- New - new (set) value;
- Old - old (overwritten) value;

Exceptions
There are variable names intended for special use- exceptions from the above
recommendations:
- i, j - iterators for small loops (a loop is considered small if it fits entirely on
one screen and allows you to see all occurrences of iterators at once);
- k, v - foreach loop variables ($aData as $k => $v);
- key, value - foreach loop variables ($aData as $key => $value);
- s - serialized data representation;
- data - a variable with data in the entity setter, as well as data returned from mapper methods;
- sql - in mappers, a variable containing the query text - the prefix “s” is not used." class="term">variable "value") )); Here the value entered by the user is passed to the handler and we can use it to determine , what to do with it next.

In conclusion of this part, I would like to draw attention to one feature that should not be forgotten: there is important difference in behavior system functions alert() , confirm() and prompt() and their analogues, about which we're talking about- ls.modal.alert(options) , ls.modal.confirm(options) and ls.modal.prompt(options) . Namely - System functions
There are several groups of so-called “system” functions in the engine. The files containing these functions are loaded at the very beginning of the engine, even before the configuration files are loaded, and the functions themselves are not tied to any module and can be used anywhere, in any component - in modules, actions, mappers, etc." class="term">system functions stop execution javascript code and wait for the user's reaction. And only after the user has reacted does code execution continue. When you use the functions described here, the entire code, including the call itself, is executed first, and only then the dialog box is displayed.

Therefore, if you take the code given at the beginning of the article and simply replace the confirm() call with ls.modal.confirm() and the code will have to be rewritten something like this:
Delete everything! $(function())( $("js-delete-all").click(ls.modal.confirm("Are you sure?", function()( location.href="site.com/delete/all/"; )););));

Please note that the handler function is passed not in the onConfirm parameter, but as the second argument of the function; this is also acceptable.