spb/lou-ka Public

123<div class="content-item">4    <div class="content-item">5        <ul class="unit-floor-name">6            <li>7                <p>Unit&#233;</p>8                <h3>302</h3>9            </li>10            <li>11                <p>Loyer</p>12                <h3>$1&#160;900</h3>13            </li>14        </ul>1516        <ul class="unit-floor-type">17            <li class="residential-type">R&#233;sidentiel </li>18        </ul>19    </div>20    <div class="content-item">21        <h3 class="accent_color_2">G&#233;n&#233;ral</h3>22        <ul class="main-items">23            <li>24                <p class="title">Superficie (pi.ca)</p>25                <h4>904</h4>26            </li>27                        <li>28                <p class="title">&#201;tage</p>29                <h4>1</h4>30            </li>31            <li>32                <p class="title">Ch. &#224; coucher</p>33                <h4>2</h4>34            </li>3536                <li>37                    <p class="title">Salles de bains</p>38                    <h4>1</h4>39                </li>404142        </ul>43    </div>44</div>45    <div class="content-item">46        <h3 class="accent_color_2">&#201;quipements</h3>47        <ul class="main-items amentities">48                                <li>49            <p class="title"><label for="AirConditioning">Climatisation</label></p>50            <h4>Air climatisé mural</h4>51        </li>52            <li>53            <p class="title"><label for="Heating">Chauffage</label></p>54            <h4>Eau chaude</h4>55        </li>56                    <li>57            <p class="title"><label for="Furnished">Meubl&#233;</label></p>58            <h4>Oui</h4>59        </li>60    61</ul>62<ul class="amentity-links">63        <li><span> <label for="Fridge">R&#233;frig&#233;rateur</label></span></li>64            <li><span><label for="Stove">Cuisini&#232;re</label></span></li>65            <li><span><label for="Dishwasher">Lave-vaisselle</label></span></li>66                <li><span><label for="Washer">Laveuse</label></span></li>67            <li><span><label for="Dryer">S&#232;cheuse</label></span></li>68    69                                                                                                70</ul>7172737475    </div>76<div class="content-item ">77    <ul class="comment-links">78        <li>79            <button class="contact-button">Contactez-nous</button>80            <div class="tooltip contact-tooltip">81                <a class="close-tooltip"><img src="/Content/Images/listings/close.png" alt=""></a>82                <h3>Contactez-nous</h3>83                <div class="content-item">84                    <ul class="unit-floor-name">85                        <li>86                            <p>Unit&#233;</p>87                            <h3>302</h3>88                        </li>89                        <li>90                            <p>Loyer</p>91                            <h3>$1&#160;900</h3>92                        </li>93                    </ul>94                    <ul class="unit-floor-type">95                        <li class="residential-type">R&#233;sidentiel </li>96                    </ul>97                </div>98                <div class="content-item">99                    <ul class="main-items">100                        <li>101                            <p class="title">Superficie (pi.ca)</p>102                            <h4>904</h4>103                        </li>104                        <li>105                            <p class="title">&#201;tage</p>106                            <h4>1</h4>107                        </li>108                        <li>109                            <p class="title">Ch. &#224; coucher</p>110                            <h4>2</h4>111                        </li>112113                            <li>114                                <p class="title">Salles de bains</p>115                                <h4>1</h4>116                            </li>117118119                    </ul>120                </div>121                122123124125<script type="text/javascript">126    var onSuccess = function (data) {127        $(this).closest(".js-send-unit-request").html(data);128    }129</script>130131<div class="js-send-unit-request">132<form action="/Listing/Send/870545" data-ajax="true" data-ajax-method="Post" data-ajax-success="onSuccess" id="form0" method="post"><input data-val="true" data-val-number="The field [[Apartment_UnitId]] must be a number." data-val-required="The [[Apartment_UnitId]] field is required." id="Apartment_UnitId" name="Apartment.UnitId" type="hidden" value="870545" /><input data-val="true" data-val-required="[[Apartment_UnitName_RequiredAttribute]]" id="Apartment_UnitName" name="Apartment.UnitName" type="hidden" value="302" /><input data-val="true" data-val-number="The field Immeuble must be a number." data-val-required="The Immeuble field is required." id="Apartment_BuildingId" name="Apartment.BuildingId" type="hidden" value="85487" /><input data-val="true" data-val-number="The field [[Apartment_AccountId]] must be a number." data-val-required="The [[Apartment_AccountId]] field is required." id="Apartment_AccountId" name="Apartment.AccountId" type="hidden" value="1057" /><input id="buildingKey" name="buildingKey" type="hidden" value="202533705612008548719" /><input id="lang" name="lang" type="hidden" value="fr-CA" />        <div class="contact-us-box">133            <div class="input-field">134                <input class="text-box single-line input-box" data-val="true" data-val-required="Le prénom est un champ requis" id="FirstName" name="FirstName" placeholder="Prénom" type="text" value="" />135                <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>136            </div>137            <div class="input-field">138                <input class="text-box single-line input-box" data-val="true" data-val-required="Le nom est un champ requis" id="LastName" name="LastName" placeholder="Nom" type="text" value="" />139                <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>140            </div>141            <div class="input-field">142                <input class="text-box single-line input-box" data-val="true" data-val-email="Adresse de courriel n&#39;est pas dans un format approprié" data-val-length="[[ListingApartmentModel_Email_StringLengthAttribute]]" data-val-length-max="255" data-val-required="L’adresse de courriel est un champ requis" id="Email" name="Email" placeholder="Courriel" type="text" value="" />143                <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>144            </div>145            <div class="input-field">146                147148<input class="text-box single-line input-box" data-inputmask="&#39;alias&#39;: &#39;phone&#39;" data-val="true" data-val-regex="Numéro de téléphone doit être dans un format international. Par exemple: +15145550123" data-val-regex-pattern="^\+[1-9]{1}[0-9()-]{7,15}$" data-val-required="Le numéro de téléphone est un champ requis" id="Phone" name="Phone" placeholder="Numéro de téléphone" type="text" value="+1" />149150151                <span class="field-validation-valid" data-valmsg-for="Phone" data-valmsg-replace="true"></span>152            </div>153            <div class="input-field">154                <textarea class="input-box" cols="20" id="QuestionsAndComments" name="QuestionsAndComments" placeholder="Questions ou commentaires?" rows="2">155</textarea>156            </div>157            <input class="send" type="submit" onclick="gtag('event', 'contact_us_unit', {'event_category': 'Lead', 'event_label': 'Contact for 302'})" value="Envoyer">158        </div>159</form></div>160161            </div>162        </li>163    </ul>164</div>165166<script>167    $(document).ready(function () {168169        $(".contact-tooltip").wrap("<div class='popup'></div>");170        $("<div class='close-popup'></div>").insertAfter(".contact-tooltip");171172        //popup173        $('.contact-button').click(function () {174            $(this).siblings('.popup').toggleClass('is-visible');175            $('body').toggleClass('body-overflow');176            $(".contact-tooltip").click(function (event) {177                event.stopPropagation();178            });179        });180181        $('.popup').on('click', function (event) {182            if ($(event.target).is('.close-popup') || $(event.target).is('.popup')) {183                event.preventDefault();184                $(this).removeClass('is-visible');185                $('body').removeClass('body-overflow');186            }187        });188189190        //close popup when clicking the esc keyboard button191        $(document).keyup(function (event) {192            if (event.which == '27') {193                $('.popup').removeClass('is-visible');194                $('body').removeClass('body-overflow');195            }196        });197198    });199</script>