Popup
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
Default
Use @Html.LLG().Popup()
method to create a Popup.
Use .For(...)
(+3 overloads) method to bind any html element, html string or LLG component.

Auto Show Popup
We help you create and manage all you projects.
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.For(Html.LLG().Button("Popup example"))
Note!
If you want to show a popup without a element use .AutoShow()
method. You don't need to use .For(...)
method.
@Html.LLG().Popup()
.Title("Auto Show Popup")
.Message("We help you create and manage all you projects.")
.AutoShow()
Popup for any html element
use .For(...)
(+3 overloads) method to bind any html element.
for LLG button |
Popup Button
![]() Hello buttonWe help you create and manage all you projects. |
for a checkbox |
![]() Hello checkboxWe help you create and manage all you projects. |
for a form control |
![]() Hello form controlWe help you create and manage all you projects. |
for a link |
Popup link
![]() Working together ?We help you create and manage all you projects. |
// For button
@Html.LLG().Popup()
.Title("Hello button")
.Message("We help you create and manage all you projects.")
.For(Html.LLG().Button("Popup Button").Size(ButtonSize.Small))
// For checkbox
@Html.LLG().Popup()
.Title("Hello checkbox")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.Left)
.For(@<text>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" checked="">
<label class="custom-control-label">Checked</label>
</div>
</text>)
// For form control
@Html.LLG().Popup()
.Title("Hello form control")
.Message("We help you create and manage all you projects.")
.For(@<text>
<div class="form-group m-0">
<input class="form-control" type="text" placeholder="First name">
</div>
</text>)
// For link
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.For(@<text>
<a href="#" class="m-link">Popup link</a>
</text>)
Position
The default position of the popups are PopupPosition.BottomRight. To change this default value, simply use
Position(PopupPosition position)
method with one of the following values:
PopupPosition.TopLeft
| PopupPosition.TopCenter
| PopupPosition.TopRight
|
PopupPosition.BottomLeft
| PopupPosition.BottomCenter
| PopupPosition.BottomRight
PopupPosition.TopLeft |
Top Left
![]() Working together ?We help you create and manage all you projects. |
PopupPosition.TopCenter |
Top Center
![]() Working together ?We help you create and manage all you projects. |
PopupPosition.TopRight |
Top Right
![]() Working together ?We help you create and manage all you projects. |
PopupPosition.BottomLeft |
Bottom Left
![]() Working together ?We help you create and manage all you projects. |
PopupPosition.BottomCenter |
Bottom Center
![]() Working together ?We help you create and manage all you projects. |
PopupPosition.BottomRight |
Bottom Right
![]() Working together ?We help you create and manage all you projects. |
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.TopLeft)
.For(@<text> <a href="#">Top</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.TopCenter)
.For(@<text> <a href="#">Bottom</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.TopRight)
.For(@<text> <a href="#">Left</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.BottomLeft)
.For(@<text> <a href="#">Right</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.BottomCenter)
.For(@<text> <a href="#">Left</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Position(PopupPosition.BottomRight)
.For(@<text> <a href="#">Left</a> </text>)
Slide
The default animation of the popup component is fade. You can change this default behavior by Slide(PopupSlide slide)
method which can accept one of the following valuse:.PopupSlide.Up
| PopupSlide.Down
| PopupSlide.Left
| PopupSlide.Right
PopupSlide.Up |
Up
![]() Working together ?We help you create and manage all you projects. |
PopupSlide.Down |
Down
![]() Working together ?We help you create and manage all you projects. |
PopupSlide.Right |
Right
![]() Working together ?We help you create and manage all you projects. |
PopupSlide.Left |
Left
![]() Working together ?We help you create and manage all you projects. |
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Slide(PopupSlide.Up)
.For(@<text> <a href="#">Top</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Slide(PopupSlide.Down)
.For(@<text> <a href="#">Bottom</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Slide(PopupSlide.Right)
.For(@<text> <a href="#">Left</a> </text>)
@Html.LLG().Popup()
.Title("Working together ?")
.Message("We help you create and manage all you projects.")
.Slide(PopupSlide.Left)
.For(@<text> <a href="#">Right</a> </text>)