How to create a modal (pop-up) window in WordPress. Modal window is activated after button click

Context menu ( PopupMenu), called in Windows application by right-click, is standard and convenient opportunity many programs. Delphi component PopupMenu designed to create such context menus. Because of the way it appears, the context menu is also called popup menu.

Delphi component PopupMenu almost no different from the MainMenu component and is also non-visual. But unlike the Main Menu, which is only one on the Form, each object placed on the Form can have pop-up menus. Therefore, you need to place on the Form and program as many PopupMenu components, how many context menus are supposed to be used in the program. Also, the context menu does not have several items top level, since all its points are located in one vertical column.

After PopupMenu component placed on the Form, the menu structure is formed in exactly the same way as creating the Main Menu (MainMenu component). Next, in order for the context menu of a certain object (for example, a StringGrid component) to be called in the program, the property needs to be PopupMenu assign this object the name of the corresponding Delphi component PopupMenu:

At the moment of appearance context menu is happening onPopup event PopupMenu component. At this point, based on an analysis of the situation, you can make the necessary changes to its parameters.

By right-clicking on an object, we get the appearance of its context menu provided by the PopupMenu component 1 , at the point of the click. But we can achieve its appearance in any place of the Form we need. This is achieved using the method Popup component PopupMenu, while the Popup property of the corresponding component (in in this case StringGrid) needs to be cleared.

To use this method you must use a click event right button mouse over the object. And it is more correct to use letting go buttons, that is, an event onMouseUp the desired object. Method Popup has X and Y parameters corresponding to the horizontal and vertical distance of the click point from the top left corner screen respectively. That is, you can achieve the appearance of a menu completely outside the Form. Here, try using this code:

procedure
begin
if Button = mbRight then PopupMenu1.Popup(0, 0); //menu appears at point (0, 0)
end;

But also the event handler onMouseUp also has X and Y parameters. They correspond to the horizontal and vertical distance of the click point from the upper left corner already Forms. However, if you try to use them in the method Popup, then the menu will not appear where you expect. To achieve desired effect, it is also necessary to take into account the position of the Form itself, as well as the object within which the menu should appear. But that's not all. It is necessary to add the height of the Form title, which is unknown, to the X value. All these terms complicate the code.

The function will help you get rid of most terms GetClientOrigin. It is called without parameters and returns the offset of the Form's client area relative to the upper left corner of the screen in the format TPoint(dot, that is, a record with fields X and Y). Thus, it remains to take into account only the position of the desired object. The following code ensures that the menu appears exactly where the mouse clicks on the StringGrid1 component:

procedure TForm1.StringGrid1MouseUp(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
var P: TPoint;
begin
P:=GetClientOrigin;
if Button = mbRight then
PopupMenu1.Popup(X+P.X+StringGrid1.Left, Y+P.Y+StringGrid1.Top);
end;

Delphi lessons for beginners

Questions and comments(11) Solving problems in Delphi

Andrey, added 08/13/10, 18:54:03
But you can write it like this, and then you don’t need any terms at all.

procedure TForm1.SGMouseUp(Sender: TObject; Button: TMouseButton;
var point: TPoint;
begin
getCursorpos(point);
if Button = mbRight then PopupMenu1.Popup(point.X, point.Y);
end; Author, added 08/13/10, 19:58:51
Andrey, thank you! Yes, the GetCursorPos function is the way to go. Maxim, added 09/06/10, 19:52:30
Please tell me how to find out when PopupMenu disappears? There is an OnPopup event (appearance), I just need it so that when the menu appears, the text on the window turns green, and when it disappears, it turns black again Author, added 09/06/10, 20:45:18
I'm on vacation now, not at the computer. I can suggest this option: detect when the menu disappears. This definitely happens when you press the Escape key and when you select any (any) menu item. Introduce color changes into these events. Konstantin, added 05/08/11, 11:22:55
can you help with Shape
In short, I have a shape and a button in one form, they are located on the groupbox
I ask this:
procedure TForm15.Shape1MouseDown(Sender: TObject; Button: TMouseButton;
Shift: TShiftState; X, Y: Integer);
begin
if ColorDialog1.Execute then
begin
Shape1.brush.Color:= ColorDialog1.Color;
Shape1.pen.Color:= ColorDialog1.Color;
end;
end;
then I give the button this:
rocedure TForm15.Button1Click(Sender: TObject);
begin
form15.Color:=Shape1.brush.Color;

end;
This is how it all works, i.e. for the form where the above written components are
The program works, but how can I make it work for other forms?
Author, added 05/08/11, 12:04:43
Konstantin, it is difficult to actually understand your question. What do you mean by running a program in other forms? Maybe you need to assign a color not only to the 15th form, but also to others? That is, other forms also have a button that, when clicked, changes the color of the form? In this case, you just need to refer to the Shape of the form where it exists:

FormN.Color:=Form15.Shape1.Brush.Color;

Or clarify your question. Anonymous, added 05/08/11, 12:10:47
not quite like that
I have to click on the button in the 15th form and the color should change in all other forms
Is that even possible? Konstantin, added 05/08/11, 12:17:02
That's it, thanks for the help, I figured it out myself. Author, added 05/08/11, 12:20:40
Please bones, added 10.28.11, 17:09:00
you can get by with the latter case and without TPoints. This will significantly shorten the code.
PopupMenu1.Popup(Mouse.CursorPos.X, Mouse.CursorPos.y) Author, added 10.28.11, 17:28:13
Thank you! I'll add it to the article as an option.

Hello friends! I suggest we talk about creation in WordPress modal windows. Pop-up (modal) windows significantly expand the capabilities of the site. Do you have a message or ad that every website visitor should see? Do you need to make your campaign visible? Do you want to make a pop-up registration form on your website or a content sharing form? social networks? Create a modal window!

Pop-up modals are designed to attract attention. Appearing on the page, they block the main content and force the user to familiarize themselves with their content (text, video, call to action, etc.).

Attention! Don't be intimidated by the length of this lesson - there are no difficulties in creating modal windows (read and see for yourself), I just describe each step in detail.

Algorithm for creating modal windows in WordPress

WordPress does not have built-in tools for working with pop-ups. We will design and customize them using a plugin Popup Maker. Let's, for example, create a modal window with a video, pop-up when clicking a button(you can configure it later automatic appearance).

1. Install Popup Maker plugin. Activate his. Let me remind you: we learned how to install plugins.
   
2. Find the section in the side menu on the left of the admin panel Popup Maker and go to its subsection Add Popup.
3. The modal window editor opens. Enter the name of the window in the field at the top of the page (the name will only be displayed in the admin panel - users will not see it).
4. Come up with window title(will be visible to users) and enter it in the field above the button Add media file.
5. In the block Conditions Select from the drop-down menu the pages (categories) on which the window will appear. If the plugin should work on all pages of the site, select Format:All.
6. Add to the large field below the toolbar text, images, video or audio– any content that will be shown in the pop-up window. In the example under consideration, I added the code for a video from YouTube (we studied adding videos to a WordPress site).
   
7. In the block Triggers There are settings for manual or automatic opening (self-activation) of the pop-up window. In our example, I chose the value Click Open.
8. Please indicate below popup size(in pixels or percentages). When choosing an option Auto The plugin will resize the modal window automatically.
9. Check the box in the line Disable background so that the site page is visible behind the pop-up window (I recommend).
10. Set up animation type and speed(not necessary: ​​optimal values ​​are already set by default).
    
11. Adjust the position of the window on the screen. Initially the plugin positions it at the top center.
12. Property value z-index, set by default, usually does not need to be changed.
    
13. Select options to close the pop-up window. Check the checkboxes in the lines with "birds" Click Overlay to Close(the window will close when you click on the background around it), Press F4 to Close(the window will close with the key F4), Press ESC to Close(the window will close with the key ESC). In order not to annoy site visitors with the puzzle of closing the modal window, I recommend checking all the boxes.
    
14. Click Publish. Congratulations, your modal window has been created!

About customizing the popup window design

To change the design of the created modal window, go to the subsection Theme section Popup Maker side menu of the admin panel (left).

In the editor that opens, configure desired background windows, color And font sizes, padding, shadows, button name closing. The taste and color… you know, so I won’t go into detail about customizing the design of the pop-up window. If you have questions, ask them in the comments.

How to set up a pop-up window

Remember, we didn’t enable the function of automatically opening a modal window in the plugin settings? Therefore, we need to figure out how our window will open. Let's set up a window to pop up when you click on a link, picture or button.

The Popup Make plugin assigns each window two unique CSS classes. If you add any of these classes to a web page element, then when you click on this element, a modal window will open.

Where and how to cheat Instagram comments- all methods. The portal pricesmm.com found out what is cheaper and better: to increase comments on Instagram yourself, with programs, to receive in exchange or to order a service on the SMM service. Pros and cons of each method.

Examples of adding modal window CSS code to a link, image, and button:

Modal window will appear when you click on the picture

Modal window is activated after button click

Click on the HTML element after adding a CSS class to it popmake-obrazets-modalnogo-okna. A modal window similar to this should appear:

Has it appeared? Great! Now you can configure pop-up windows. If the window does not open, describe the problem in the comments - we will launch it together!

We offer you a selection of the 5 most interesting, in our opinion, Internet services for creating interactive pop-ups, which have been used in Internet marketing for more than 20 years and remain popular to this day. The reason pop-ups are so popular is that they focus on the needs of a specific user - you give your site visitor only what he really needs, exactly at the moment when he needs it. However, when preparing pop-up windows, it is important to take a comprehensive approach to the process - from choosing an online service to determining the lifetime of the pop-up window.

Optimonk service
Optimonk offers the deepest, professional settings. If you understand it well, you can get amazing results. He has several tariff plans, which start at $29/month but offer a 14-day free test new period.
The script is easy to install. You need to register at optimonk.com. Select a suitable pop-up window template there and edit it as you wish. A simple editor is provided to edit the pop-up window. This can also be done by changing the CSS or javascript code. To change a phrase, you need to select it with the mouse and edit it.
Ready-made color solutions are offered, but you can set your own tone. You can also choose a suitable animation. It will be useful to add a pop-up thank you window that will automatically pop up after the user fills out and submits the form. After saving the settings, you need to set a schedule and select the necessary triggers, that is, events that will provoke the appearance of a pop-up.
IN this service Targeting is set up and integration with the most popular CRM systems and e-mail services (foreign) is carried out. After saving all the settings, all that remains is to copy and paste the resulting code into the site template at the very end of the page, before the tag. Final stage installations - clicking the OK button, which activates the campaign. Then you will be able to manage your Pop-up in your personal account.

Advantages of Optimonk:

• 11 prepared templates, including with a timer, a form for e-mail and name, a discount coupon, a double Pop-up, etc.
• Full integration with the most famous email services and engines.
• Connection with Google Analytics.
• The programmer can set up the deepest targeting.
• Great analytics.
• By changing javascript you can dynamically change the text.

Disadvantages of Optimonk:

• Just a two week trial period.
• Decent price.
• Limit of 5,000 unique visitors/month.
• Only one domain is accepted.

Picreel service
Not bad paid service with expanded opportunities for the work of Internet marketing professionals. When paying for 12 months. — 25% discount.

After registering on picreel.com, you need to select the appropriate template:

• Subscription.
• Redirect.
• Survey.
• Discounts.
• Simple pop-up.
• Big Pop-up.
• Pop-up from 2 windows...

Any template can be edited in a simple editor or by changing HTML/CSS. The design changes as easily as new fields are added. You can insert animations, countdown timers, and other interactive elements. As usual, triggers are configured, after which the settings are saved and the generated code is inserted into the website template at the end of the page.

Advantages of Picreel:

• 30-day free trial without functionality limitations.
• Lots of templates.
• Full compatibility with CRM and e-mail services (foreign).
• Extensive targeting.
• Great analytics.
• Possibility of α & ß testing.
• Adaptation of design for mobile devices.
• Affiliate program.
• For each referred user: $25.
• An amount of $100 can already be withdrawn, to Paypal, for example.

Disadvantages of Picreel:

• Pretty decent value, starting at $19 monthly.
• Traffic limit is 3000 uniques per month or 30,000 impressions.
• There are no free plans.

Advantages of Witget:

• Normal price.
• Russian language.
• Huge database of templates.
• In addition to Pop-up, there are many templates for banners, buttons, forms, timers, and so on.
• Adaptive layout for mobile devices.
• Russian-language social networks.
• Data export.
• Integration with Russian speakers email services newsletters.
• Normal statistical accounting.

Disadvantages of Witget:

• Very difficult to communicate with Google analytics.
• Just a 7-day free test at a rather steep price of 990 rubles/month.
• True, there are discounts for paying in advance.

Advantages of Addthis:

• Availability of a free tariff.
• Simple interface.
• The text content and design of the pop-up can be changed.
• Targeting is highly customizable.
• Wonderful analytics.
• Possibility to download collected email addresses.
• The design is mobile responsive.

Disadvantages of Addthis:

• Majority useful functions are presented only in paid versions.

Sumome service
The cost of full-featured plans starts at $40/month, although there is also a free one, which includes basic functions. The good thing about the service is that, in addition to pop-up windows, you can purchase a wide variety of widgets there, which will be very useful for Internet marketers. After registering on sumome.com, you need to specify the URL of your resource. The code that appears must be copied into the template on your website immediately after the tag. Then you need to go to your resource and click on the image of the crown, which should appear at the top of the screen on the right.
Next, click on the “Sumo Store” icon and select the widget you like; some widgets are free and marked Free. By clicking on the button with the widget, you need to wait until it is installed and configure its appearance. IN full versions You can add fields of any shape. IN free version You can use only 1 field - to enter an e-mail. On free plan you won't be able to use ready-made templates, there is only one available, and in it you can only change the background color.
Next, you need to configure the behavior of the pop-up and select the pages where it will pop up. Then select CRM and Email Service to synchronize with your subscription list. You can create your own form in full versions in the HTML editor. After setting all the parameters, all you have to do is click SAVE and you can start monitoring the statistics.

Advantages of Sumome:

• Free tariff.
• Lots of widgets.
• Ability to change the text and design of the pop-up.
• The collected emails can be downloaded.

Disadvantages of Sumome:

• Only 1 template is available in the free plan.
• Not everyone affordable price— $40 per month.
• Widgets are sold as a set, not individually.
• Targeting has sparse settings.
• Branding is not disabled.

Let's summarize.

We recommend starting to use pop-up windows with free services, see user reaction, conversion and response, and only then purchase paid subscription. This way, you can evaluate the effectiveness of pop-up windows and have time to choose the right promotion strategy. Try several sites, use the entire arsenal of tools to create pop-ups, this way you can get the most out of the opportunities that pop-ups provide.

We hope this collection will be useful to you in creating a fully functional website!