Одно модальное окно с разным содержимым

#html #bootstrap

Пишу html страницу с использованием bootstrap на которой есть кнопки регистрации
и авторизации пользователей. При нажатии на кнопку всплывает модальное окно с формой
того или иного действия. Формы в дальнейшем с использованием ajax отправляются для
обработки на сервер. На самой странице каждое модальное окно оформлено отдельно:


    
    
    

        
        
    



    
    
    
    

        
        
    



Содержимое окон очень похоже. Возник вопрос:

Как сделать так, что бы было одно модальное окно, а содержимое менялось в зависимости
от нажатой кнопки?
    

Ответы

Ответ 1

Вариант 1: С помощью JavaScript динамически строить содержимое внутри окна.

Вариант 2: Через ajax подгружать содержимое форм и помещать его внутрь окна.


Ответ 2

Сделал на jQuery. При клике на кнопку, вставляем нужное сожержимое в наше окно.



$("#button-1").click(function() {
   $(".modal").toggleClass("hidden").html('

');
});
$("#button-2").click(function() {
   $(".modal").toggleClass("hidden").html('

'); }); button { width: 140px; height: 30px; color: aqua; background: blue; border: 0; border-radius: 5px; outline: none; margin: 6px; cursor: pointer; } input { border: 1px solid gray; border-radius: 5px; height: 24px; width: 126px; padding: 2px 6px; margin: 6px; outline: none; } .hidden { opacity: 0; } .modal { width: 274px; border: 1px solid gray; padding: 5px 10px; text-align: center; border-radius: 5px; margin: 6px; }

Ответ 3

Прошу сильно не ругаться, код написан на коленке, но должен ответить на Ваш вопрос. $('#btn-enter').click(function () { $('#reg').css({'display': 'none'}); $('#enter').css({'display': 'block'}); }); $('#btn-reg').click(function () { $('#reg').css({'display': 'block'}); $('#enter').css({'display': 'none'}); }); https://jsfiddle.net/jqezjpjx/