При нажатии на кнопку выходило модальное окно

[dava002]

Здравствуйте, уважаемые участники форума. Т.к. в javascript я нуб прошу у вас помощи. Есть скрипт который при нажатии на кнопку #button-oneclick происходит скролл к breadcrumb и выход сообщения error или success. Нужно что бы при нажатии на кнопку #button-oneclick выходило модальное окно с одним из этих сообщений. Заранее благодарю откликнувшихся на мой призыв о помощи! 
P.S. Если что то не до рассказал прошу не судить строго и задать вопрос)

Собственно сам код

<script type="text/javascript"><!--
$('#button-oneclick').on('click', function() {
    $.ajax({
        url: 'index.php?route=checkout/one_click/add',
        type: 'post',
        data: $('#oneclick input[type=\'text\'], #oneclick input[type=\'hidden\']'),
        dataType: 'json',
        beforeSend: function() {
            $('#button-oneclick').button('Загрузка');
        },
        complete: function() {
            $('#button-oneclick').button('reset');
        },
        success: function(json) {
            $('.alert, .text-danger').remove();
            $('.form-group').removeClass('has-error');
 
            if (json['error']) {
                if (json['error']['telephone']) {
                    $('.breadcrumb').after('<div class="alert alert-danger text-danger">' + json['error']['telephone'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                    $('html, body').animate({ scrollTop: 0 }, 'slow');
                }
                if (json['error']['product']) {
                    $('.breadcrumb').after('<div class="alert alert-danger text-danger">' + json['error']['product'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                    $('html, body').animate({ scrollTop: 0 }, 'slow');
                }
                if (json['error']['order']) {
                    $('.breadcrumb').after('<div class="alert alert-danger text-danger">' + json['error']['order'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                    $('html, body').animate({ scrollTop: 0 }, 'slow');
                }
            }
 
            if (json['success']) {
                $('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
//--></script>

 

[npofopr]

Судя по всему, у вас там бутстрап? 
Вам надо заменить ваши алерты на вызов модального окна https://getbootstrap.com/docs/3.3/javascript/#modals-events 

Или я бы алерты просто сделал в виде модалок. 
У них и кнопка закрыть есть https://getbootstrap.com/docs/3.3/javascript/#alerts 
Надо то, только по центру экрана выводить.

[dava002]

42 минуты назад, npofopr сказал:

Судя по всему, у вас там бутстрап? 
Вам надо заменить ваши алерты на вызов модального окна https://getbootstrap.com/docs/3.3/javascript/#modals-events 

Или я бы алерты просто сделал в виде модалок. 
У них и кнопка закрыть есть https://getbootstrap.com/docs/3.3/javascript/#alerts 
Надо то, только по центру экрана выводить.

да все верно бутстрап. а не подскажите как это сделать просто я в этом не смыслю?

[DivMan]

учи чистый js 

[greeb]

если бутстрап то https://v4-alpha.getbootstrap.com/components/modal/