Модальное окно

[iamrewqaz 0]

Мне нужно добавить в профиль пользователя кнопку +, при нажатии(наведении), которого выходит выпадающий список, 1. Соц сеть, 2. Ютюб, 3. Другое.

Нажимаю на "Соц сеть" всплывает модальное окно, в котором есть input в котором пишу ссылку на соц. сеть. 

После этого чтобы в профиле пользователя появилась новая кнопка, соответствующего социальному списку ссылку которого написали стиля, при нажатии на которого переходит по ссылке.

Чтобы это всё сохранилось.

тут код JS

          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Вот код страницы

<center>
            </ul><div class="block story shadow">
    <ul class="user_tab">
                [not-logged]
    <nav id="topmenu">
                             <ul>
           <li class="parent"><a href="/index.php?do=feedback">+<svg class="icon icon-arrow_down"><use xlink:href="#icon-arrow_down"></use></svg></a>
        <ul>
                       <li><a href="javascript: void(0);" onclick="DLEalert('Т1', 'МО1');">Соц сеть</a></li>
            <li><a href="javascript: void(0);" onclick="DLEalert('Т2', 'МО2');">URL</a></li>
            <li><a href="javascript: void(0);" onclick="DLEalert('Т3', 'МО3');">Другое</a></li>
                    </li>
        </ul>
    </li>
        </ul>
                        <a href="#" id="closemenu"><span><svg class="icon icon-cross"><use xlink:href="#icon-cross"></use></svg></span></a>
       </nav>
        [/not-logged]
    </ul><p>
    <ul class="user_tab">
                [not-logged]<li><a href="#user2" data-toggle="tab">Добавить</a></li>[/not-logged]
            </ul>
    <ul class="user_tab">
                [not-logged]<li><a class="right" href="https://donocard.ru/index.php?action=logout">Выход</a></li>[/not-logged]
            </ul>
    
    <p><div class="wrp">
            <div class="avatar">
                <span class="cover" style="background-image: url({foto});">{usertitle}</span>
            </div></p>
        <p><h1 class="title h2 ultrabold">{fullname}[not-fullname][/not-fullname]</h1></p> 
            <h1 class="title h2 grey">@{usertitle}</h1>

       ВОТ ТУТ ЧТОБЫ ПОЯВИЛИСЬ КНОПКИ
            
</div>            
</center>
<div class="block">
    <div class="wrp">
        <div class="tab-content">
            <div class="tab-pane active" id="user1">
                
                <br>
                        </div>
            
            [not-logged]
            <div class="tab-pane" id="user2">
                <!-- Настройки пользователя -->
                <div id="options">
                    <div class="addform">
                        <ul class="ui-form">
                            <li class="form-group">
                                <label for="image">Загрузите аватар</label>
                                <input type="file" name="image" id="image" class="wide">
                                <div class="checkbox"><input type="checkbox" name="del_foto" id="del_foto" value="yes" /> 
                                    <label for="del_foto">Удалить аватар</label></div>
                            </li>
                            <li class="form-group">
                                <label for="fullname">Ваше имя</label>
                                <input type="text" name="fullname" id="fullname" value="{fullname}" class="wide">
                            </li>
                            <li class="form-group">
                                <label for="email">Ваш e-mail</label>
                                <input type="email" name="email" id="email" value="{editmail}" class="wide" required>
                            </li>
                                <div class="form-group">                            
                         
                                <table class="xfields">
                                {xfields}
                                </table>
                            
                                    </div>
                            <li class="form-group form-sep"></li>
                            <li class="form-group">
                                <label for="altpass">Старый пароль</label>
                                <input type="password" name="altpass" id="altpass" class="wide">
                            </li>
                            <li class="form-group">
                                <label for="password1">Новый пароль</label>
                                <input type="password" name="password1" id="password1" class="wide">
                            </li>
                            <li class="form-group">
                                <label for="password2">Повторите новый пароль</label>
                                <input type="password" name="password2" id="password2" class="wide">
                            </li>
                            <li class="form-group form-sep"></li>
                                                                                            <li class="form-group">
                                <div class="checkbox">{twofactor-auth}</div>
                            </li>
                                                    </ul>
                        <div class="form_submit">
                            <button class="btn btn-big" name="submit" type="submit"><b>Сохранить</b></button>
                            <input name="submit" type="hidden" id="submit" value="submit">
                        </div>
                    </div>
                </div>
                <!-- / Настройки пользователя -->
            </div>
            [/not-logged]
        </div>
    </div>
</div>
    

[iamrewqaz 0]

Этот вопрос решил другим путём.

[xfgiven_soc1o]<p>  <button class="button-8"><a href="https://[xfvalue_soc1].com/[xfvalue_soc1o]" style="text-decoration: none; color:black; ">[xfvalue_soc1]</a></button></p> [/xfgiven_soc1o]
создал 2 вида доп.полей для профиля пользователя по 3 копии, где при условии, что поля 2 типа будет заполнено первая кнопка отобразится, 3 копии = 3 кнопки.

1 тип список, где ему надо выбрать соц сеть.

Instagram|Instagram
Facebook|Facebook
X|Twitter/X
Vk|Вконтакте
Ok|Одноклассники

2 тип одна строка, где пользователю надо всего лишь написать имя пользователя.

Вопросы следующие.

1. Как сгруппировать 1 и  2 тип, так чтобы 2 копия этих полей с ними в одном ряду не было, а было с новой строки? 

2. Как можно реализовать чтобы под последним доп.полем или рядом с ним появилась кнопка "еще" при нажатии которого появился еще одна копия доп.полей 1 и 2 типа.

К первому вопросу прикрепляю скриншот, чего хочу избегать

 

 

[iamrewqaz 0]

С 1 вопросом разобрался. Вместо {xfields} добавил конкретные [xfinput_X] в разных контейнерах.

2 вопрос остается незакрытым. Или может есть способ, что при добавлении текста во втором доп.поле внизу появляется еще одна копия доп.полей 1 и 2 типа?

[germanydletest 455]

1 час назад, iamrewqaz сказал:

2 вопрос остается незакрытым. Или может есть способ, что при добавлении текста во втором доп.поле внизу появляется еще одна копия доп.полей 1 и 2 типа?

https://lazydev.pro/product/70-dle-dynamic-xfield.html

[celsoft 6 076]

6 часов назад, iamrewqaz сказал:

2 вопрос остается незакрытым. Или может есть способ, что при добавлении текста во втором доп.поле внизу появляется еще одна копия доп.полей 1 и 2 типа?

В DLE не существует понятия копий доп. полей. Каждое доп. поле уникально, соответственно для этого должны быть созданы другие доп. поля. А сделать их выпадающими можно на  JS в том же шаблоне.