Examples for the html for Pop Ups

Created by Nicole Le, Modified on Thu, 4 Oct, 2018 at 10:57 AM by Nicole Le

Question:

Is it possible for you to send me some examples for the html for popups so that I can create

a)  A Newsletter pop up

b)  A form popup

c)  A pop up that has a list of cross-sell items


Answer


a)A Newsletter pop up - http://prntscr.com/l1m28w

  • Content:

<div class="newletter_wrapper" style="background-image: url('{{media url="wysiwyg/5Asset_1.png"}}');">{{block class="Magento\Newsletter\Block\Subscribe" name="popupSubscribe" template="Magento_Newsletter::subscribe.phtml"}}</div>

  • Pop-up CSS:

.popup_wrapper {width:500px; height:292px; padding: 0 0;}

.newletter_wrapper{width:500px; height:292px;}

.popup_wrapper .block.newsletter .field {margin: 0; width: 40%; bottom: 35px; left: 30px; position: absolute;}


b)A form popup - http://prntscr.com/l1m5bi

  • Content:

<div class="contactUs_wrapper">{{block class="Magento\Contact\Block\ContactForm" name="contactForm" template="Magento_Contact::form.phtml"}}</div>

  • Pop-up CSS

.popup_wrapper{padding: 0 0; width: 339px; height: 433px;}

.popup_content {width: 309px;height: 403px;margin: 12px auto; border-radius: 10px; border: 2px solid #1979c3;}

.popup_wrapper .legend{border:none; text-align:center; color:#1979c3; font-weight:bold }

.popup_wrapper .note{display:none}

.popup_wrapper .telephone{display:none}

.popup_wrapper .contactUs_wrapper{vertical-align: middle;margin: auto 50px;}

.popup_wrapper div.primary{float:right}

.popup_wrapper button.submit{margin: 0 0 0 0 !important}

.popup_wrapper .fieldset {margin: 0 0 10px;}


c)A pop up that has a list of cross sell items - http://prntscr.com/l1majo - just support product list

  • Content:

<p>{{widget type="Magento\CatalogWidget\Block\Product\ProductsList" title="Don't Miss Out These Must-Have Items for Summer" show_pager="0" products_count="4" template="product/widget/content/grid.phtml" conditions_encoded="^[`1`:^[`type`:`Magento||CatalogWidget||Model||Rule||Condition||Combine`,`aggregator`:`all`,`value`:`1`,`new_child`:``^]^]"}}</p>

  • Pop-up CSS:

.popup_wrapper {padding: 0 0}

.popup_wrapper .block-products-list {margin: auto; text-align: center;}

.popup_wrapper .block-title{margin-top: 10px;}

.popup_wrapper .block-title strong { font-size: 25px; font-weight: 700; color:white}

.popup_content {background: linear-gradient(to right, #ff9966 , #ff5e62);}







Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article