Как да добавите изскачащ модал към вашата форма

March 28, 2022

Ей там!

Ако се чудите как можете да внедрите изскачащ модал във вашата форма, това е точното място за вас. Обикновено изскачащи модали се използват, ако искате да покажете някои реклами, допълнителна информация или други съобщения, които не са част от основната част на вашата форма.

Имайте предвид, че ще използваме Jotform 4.0 в това ръководство. Ето примерни линкове, които направих, за да покажа как работи изскачащия модал:

Демо форма – по подразбиране трябва да щракнете върху бутони, за да отворите и затворите модала.

Вградена форма – по подразбиране автоматично отваря модала при зареждане на страницата.

По-долу са описани стъпките за това как можете да направите същото:

  1. Първо, трябва да добавим Параграф елемент към нашата форма. Тогава съдържанието му ще бъде този HTML код:

<p><a class=”button” href=”#open” rel=”nofollow”>Open Pop-Up</a></p>
<div id=”open” class=”modalBox”>
    <div>
        <p><a class=”close” title=”Close” href=”#close” rel=”nofollow”>X</a></p>
        <h2>Hey there!</h2>
        <p>Here’s a pop-up modal.</p>
        <p>You can customize this with your own message.</p>
    </div>
</div>

Можете да редактирате маркираните текстове. Ако сте запознати с уеб разработката, можете лесно да структурирате ваша собствена HTML маркировка.

Ето скринкаст, който да ви насочи по-добре:

2. След това намерете иконата на инструмента за проектиране на форми и щракнете върху нея.

3. Сега трябва да поставите този персонализиран CSS код във вашата CSS област. По-долу е CSS кода:

/*Main Box Content*/
.modalBox {
    position:fixed;
    font-family: Arial, Helvetica,sans-serif;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background: rgba(0,0,0,0.8);
    color:black;
    z-index:99999;
    opacity:0;
    -webkit-transition:opacity400ms ease-in;
    -moz-transition:opacity400ms ease-in;
    transition:opacity400ms ease-in;
    pointer-events:none;
}
/*When the href are clicked*/
.modalBox:target {
    opacity: 1;
    pointer-events: auto;
}
/*Positioning of the child box*/
.modalBox>div {
    width:400px;
    position:relative;
    margin:10%auto;
    padding:5px20px13px20px;
    border-radius:0px;
    background:white;
}
/*Positioning and style of the close button*/
.close {
    background:white;
    color:black;
    line-height:25px;
    position:absolute;
    right:1px;
    text-align:center;
    top:1px;
    width:35px;
    text-decoration:none;
    font-weight:bold;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    -moz-box-shadow:1px1px3px#000;
    -webkit-box-shadow:1px1px3px#000;
    box-shadow:none;
    border:none;
}
/*Style when mouse hovers on the close button*/
.close:hover {
    background:black;
    color:white;
}
/*Default style of the open pop-up button*/
.button {
    background-color:black;
    border:none;
    color:white;
    padding:2px10px;
    text-align:center;
    text-decoration:none;
    display:inline-block;
    font-size:16px;
    margin:4px2px;
    cursor:pointer;
}

Ето къде трябва да го поставите:

Можете да видите, че съм вмъкнал коментари за всяка част от кодовия блок, това би трябвало да ви помогне или да ви насочи към това, което конкретният CSS кодов блок стилизира или прави.

4. Превъртете надолу и ще видите бутона Запази.

За да научите повече за добавянето на CSS код към вашата форма, можете да проверите и това ръководство: Как да инжектирате персонализирани CSS кодове

Как да отворите автоматично модала?

Как да задействам ръчно отваряне и затваряне на модалния прозорец? Можете да направите това, като добавите #open или #close към вашия формов линк или вграден код. Това са идентификаторите, които сме задали на нашите тагове котви в HTML маркирането.

Затваряне: https://www.jotform.com/70331350848958#close

Отворяне: https://www.jotform.com/70331350848958#open

Ако вграждате формата в уебсайта си и искате автоматично да отворите модала при зареждане на страницата, можете да добавите #open към атрибута src на iframe.

Готово! Вече имате изскачащ модал във вашата форма.

Чувствайте се свободни да коментирате по-долу, ако имате някакви предложения или притеснения относно това.

Беше ли това ръководство полезно?
Свържете се с екипа за поддръжка:

Нашият екип за поддръжка на клиенти е на разположение денонощно и средното ни време за реакция е между един и два часа.
С нашия екип можете да се свържете чрез:

Форум за поддръжка: https://www.jotform.com/answers/

Свържете се с поддръжката на Jotform: https://www.jotform.com/contact/

Изпратете коментар:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Коментар:

Podo CommentБъдете първите, които коментират.