Как получить результат из модального диалога в JQuery
8991 просмотра
3 ответа
Я хотел бы использовать надстройку типа simple-modal или диалоговую надстройку в наборе пользовательского интерфейса. Тем не менее, как я могу использовать эти или любые другие и получить результат обратно. По сути, я хочу, чтобы модал выполнил некоторое взаимодействие ajax с сервером и вернул результат для вызывающего кода, с которым нужно что-то делать. Благодарю.
Автор: Gabe Anzelini Источник Размещён: 17.05.2019 03:05Ответы (3)
5 плюса
Вот как работает окно подтверждения на simpleModal:
$(document).ready(function () {
$('#confirmDialog input:eq(0)').click(function (e) {
e.preventDefault();
// example of calling the confirm function
// you must use a callback function to perform the "yes" action
confirm("Continue to the SimpleModal Project page?", function () {
window.location.href = 'http://www.ericmmartin.com/projects/simplemodal/';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
close: false,
overlayId: 'confirmModalOverlay',
containerId: 'confirmModalContainer',
onShow: function (dialog) {
dialog.data.find('.message').append(message);
// if the user clicks "yes"
dialog.data.find('.yes').click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
$.modal.close();
});
}
});
}
Автор: Espo
Размещён: 08.09.2008 05:05
0 плюса
Так как модальное диалоговое окно находится на странице, вы можете установить любую переменную документа, которую вы хотите. Однако все модальные диалоговые сценарии, которые я видел, включали демонстрацию с использованием возвращаемого значения, так что, скорее всего, на этой странице.
(сайт заблокирован для меня, иначе я бы посмотрел)
Автор: Ben Scheirman Размещён: 08.09.2008 04:380 плюса
Если ваш HTML-код похож на следующий, и вы пытаетесь избежать начальной загрузки, попробуйте сделать это следующим образом. Вы также можете применить AJAX к этой структуре, так как это как любая другая часть HTML вашей страницы. Или вы попробуете то же самое с помощью Bootstrap, и ваша работа станет проще. Вот код, пожалуйста, попробуйте. Это все еще может быть улучшено и изменено:
$("button.try-it").on("click", function() {
$(".modal-container").removeClass("hide");
});
$(".close-btn").on("click", function() {
$(".modal-container").addClass("hide");
});
.modal-container {
position: absolute;
background-color: rgba(35, 35, 35, 0.41);
top: 0;
bottom: 0;
height: 300px;
width: 100%;
}
.modal-body {
width: 100px;
height: 100px;
margin: 0 auto;
background: white;
}
.close-btn {
float: right;
}
.hide {
display: none;
}
.body-container {
position: relative;
box-sizing: border-box;
}
.close-btn {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="body-container">
<div class="button">
<button class="try-it">Try It!!</button>
</div>
<div class="modal-container hide">
<div class="modal-body">
<span class="close-btn">x</span>
<p>Here is the content of the modal</p>
<!--You can apply AJAX on this structure since this just like any other part of the HTML of your page-->
<!--Or you can use Bootstrap modal instead of this one.-->
</div>
</div>
</div>
Надеюсь, это было полезно.
Вот ссылка на скрипку.
Автор: Code_Ninja Размещён: 15.02.2019 08:56Вопросы из категории :
- javascript Как определить, какой из указанных шрифтов был использован на веб-странице?
- javascript Валидация клиентской стороны ASP.Net
- javascript Длина объекта JavaScript
- javascript Получение текста из выпадающего списка
- jquery Прокрутка переполненных DIV с помощью JavaScript
- jquery Экранирование строк HTML с помощью jQuery
- jquery Как сравнить HTML-сущность с JQuery
- jquery Есть ли функция "существует" для jQuery?
- ajax Есть ли какой-нибудь способ для передачи данных с веб-сервера в браузер?
- ajax Как получить результат из модального диалога в JQuery
- ajax Как я могу подавить диалог аутентификации браузера?
- jquery-ui Слайд справа налево?
- jquery-ui Вкладки интерфейса Jquery UI и облегченные jcarousel, похоже, не работают (конфликт) в Internet Explorer (IE)
- jquery-ui Тематика jQuery-UI - различия в размерах CSS
- simplemodal Draggable SimpleModal Popup
- simplemodal Всплывающее окно на событие YouTube API
- simplemodal Simplemodal Контейнер изменения размера для всех браузеров