Jquery popup, general creation

One way to attract users to the site is pop-ups. Of course, this does not give a 100% guarantee of increasing attendance, but nevertheless for some time they attract attention to information.

Creating a jquery popup is not an easy task, but it can be done if desired. And yet, before you start creating such a work, you need to visually imagine what it is and how it looks.

The site page is created using the HTML language. On it, in the order that the owner of the resource likes, the buttons are placed. There may be several pieces (from one to ...), at the discretion of the creator. By clicking on such a button, the visitor will see a jquery popup. The content of these can be completely different, for example, an attractive picture or a new registration form, advertisement, message, and anything else. Fantasy in this matter is not limited to any limits. Pop-ups most often overlap the site page with a transparent dark background and on each of them there is an icon, usually understood by users at the level of intuition. The possibilities of this function are endless.

At first glance, creating such a thing is difficult, but this is a false impression. If there is a desire and there is a need, why not look into this in more detail? Even if much is not clear, there is always the opportunity to study the process by contacting professionals. Let's, for example, create and place buttons that will bring up registration windows, pictures or photos and tabs. Using javascript, a pop-up window, or rather a button, is drawn up as a link and set a common class for all of them. Links are placed inside the div tag.

The rel attribute, added to each, exactly corresponds to the class name of the window and makes it possible to open the desired one just by clicking on the link. All the jquery popup we created. Now it remains to make it neat and attractive. This will require the use of styles.

Working in styles does not cause difficulties: everything is simple and clear. You need only a little command of the HTML language. But even if the user does not understand it, the necessary information is easy to find on the Internet. In order for the jquery buttons, pop-up windows to look equally beautiful and neat in all browsers known today, it is necessary: ​​a) to center the link blocks; b) round the corners; c) connect the PIE for IE 7-8.

In general, the HTML markup will be the same for all pop-ups. Therefore, do not dwell on the use of tags: if you don’t own, just remember a few basic ones. The difference will only be in the design of the dimensions, that is, one pop-up jquery in width will look a little different. The same goes for content.

To place the registration form in the above tag, write the following:

Close

registration on the website

Enter login: Enter password:

In this record, reg_form matches the attribute of the first rel button, and the double class of the wrapping block is set by popup reg_form (a space is required). Such an inscription allows you to create both a common style for all pop-up windows and set specific parameters for each individually.

Next, we begin to place the button responsible for the pictures. Here the same thing: a double class is indicated and the path to the folder where these images are located is indicated. Well and further in the same vein.

After creation, it remains only to adjust the general appearance of the site page, to prescribe the rules for windows. That is, they will all be equally designed, edited horizontally, and each will have a button responsible for closing the window itself and its title. In addition, when loading a resource page, they will all be hidden.

If there is no desire to do it yourself, there is always the opportunity to download a script that allows you to create a pop-up window automatically, only slightly adjusting the actions of the program.

Source: https://habr.com/ru/post/K11366/


All Articles