Примеры подтверждения Jquery

Question

Я хотел бы иметь больше образцов, касающихся окна подтверждения jquery.

Я научился показывать диалоговое окно подтверждения в следующем примере:

http://www.webstuffshare.com/2010/03/jquery-plugin-jconfirmaction/

Но мне нужны более красочные и привлекательные образцы, не могли бы вы помочь?

Answer 1

посетите следующие сайты.вы найдете так много подтверждений, разработанных библиотекой плагинов jquery.

http://craftpip.github.io/jquery-confirm/

Answer 2

   $(document).ready(function () {

        $("#btnSend").click(function (e) {
            var result = window.confirm('Are you sure?');
            if (result == false) {
                e.preventDefault();
            };
        });
    });

Answer 3

Диалоги подтверждения Jquery не должны быть такими сложными, я сам сделал плагин подтверждения, jquery-Подтвердите , который поддерживает современные функции.

Прежде всего вы должны подумать о том, какчтобы инициализировать ваше подтверждение.
напрямую pluginname({title: 'amazing'});
или привязка к элементу $('.e').pluginname({title:'amazing'})

Тогда куда вы добавляете плагины HTML-контента.Вы можете предоставить опцию пользователю и установить ее на $('body')

Открытие и закрытие ваших вопросов подтверждения также может быть сделано с помощью
JS или CSS.Например, ваша HTML-разметка
<div class="myplugin-container">The confirmation content goes here</div>
Вы устанавливаете правило CSS

.myplugin-container{
   visibility: hidden;
   transition: all .4s; //transition last for .4s.
   transform: scale(0); //by default the modal is scaled to 0.
}
.myplugin-container.show{
   visibility: visible;
   transform: scale(1);
}

В момент загрузки HTML-кода вашего подтверждающего плагина в DOM он будет скрыт из-завышеуказанные правила.и в своем JS-коде вы добавляете класс к вашему .myplugin-container
$('.myplugin-container').addClass('show')
. На этом этапе в вашем диалоговом окне подтверждения будет анимация открытия.это идет от меньшего к нормальному.

Answer 4

Вы можете проверить jAlerts и демоверсию здесь

Я пользуюсь им довольно давно и доволен им.Вы можете настроить, как вы хотите, и работает кросс-браузер.

Answer 5

Попробуйте этот пример ...

На странице просмотра, где присутствует кнопка удаления, введите этот код ..

<div id="dialog-confirm" title="Remove this?">
    <p align="justify"> 
         <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
         This will be permanently deleted in our system and cannot be recovered. Do you want to continue?
    </p>
</div> 

Пример запуска кнопки удаления (поместите это в файл js):

$("#deletebutton").click(function() {
    $('#dialog-confirm').dialog('open');
}

// jquery-ui confirm dialog box
$("#dialog-confirm").dialog({
   autoOpen: false,
   resizable: false,
   modal: true,
   buttons: {
        'Remove': function() { // remove what you want to remove
               // do something here
         },
         Cancel: function() {
               $(this).dialog('close');
         }
   }
});

Примечание. Не забудьте включить скрипт jquery и скрипт плагина jquery-ui в заголовочный файл. Это не будет работать без этих файлов.

Вы можете скачать плагин jquery-ui здесь .

Если у вас есть дополнительные вопросы, просто оставляйте комментарии. : D

Answer 6

Я бы посоветовал вам взглянуть на диалоговое окно jQuery UI .jQuery UI - это официальная библиотека пользовательского интерфейса jQuery.Так что вы обязательно должны избегать Стены ванной комнаты Code :)

Такжедокументация и сообщество вокруг этой библиотеки огромны.Так что, если вы застряли;Вы обязательно получите помощь.