Bootstrap's Modal - изменить атрибут invoker, используя входное значение из modal - PullRequest
Новая
       36

Bootstrap's Modal - изменить атрибут invoker, используя входное значение из modal

0 голосов
/ 09 февраля 2019

Я пытаюсь получить модальный invoker и введенное пользователем значение, введенное в моем модале.

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

$('#myModal').on('show.bs.modal', function (e) {
    var invoker = $(e.relatedTarget);
});

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

$('#myModal').on('hidden.bs.modal', function (e) {
    var color = $("#myModal #input-id").val();
});

Но как я могу объединить обе вещи, чтобы получить это значение и на его основе изменить атрибут invoker.

Мои инициаторы: 

<div style="background: white;" data-toggle="modal" data-target="#myModal">
    <span>Some text<span/>
</div>
<div style="background: white;" data-toggle="modal" data-target="#myModal">
    <span>Some text<span/>
</div>
<div style="background: white;" data-toggle="modal" data-target="#myModal">
    <span>Some text<span/>
</div>

Когда пользователь нажимает на мой div, модал сработает с некоторым вводимым текстом, после ввода пользователем значения и нажатия кнопки сохранения (data-dismiss = "modal") я хочу поймать с помощью js входное значение иinvoker и атрибут стиля переключателя invoker с введенным пользователем значением ввода.

Модальный: 

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="MyNewModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Exit">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="input-id" class="col-form-label">Color:</label>
                    <input type="text" class="form-control" id="input-id">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

Как я могу изменить атрибут style моего invoker с пользовательскими данными, введенными в мой модал?

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Как подсказал @dwhite в своем комментарии, если мы хотим получить доступ к invoker после выхода из модального режима, нам нужно сохранить invoker в переменной в событии show.bs.modal.Этот код делает работу: 

// Declare global variable
var invoker;

// On modal show event we save invoker
$('#myModal').on('show.bs.modal', function (e) {
    invoker = $(e.relatedTarget);
    console.log(invoker);
});

// When the user provides input and he exit modal, we get that value and we can
// access invoker to perform some actions
$('#myModal').on('hidden.bs.modal', function () {
    var color = $("#myModal #input-id").val();
    $(invoker).css('background', color);
    console.log(invoker);
    console.log(imageUrl);
});
0 голосов
/ 09 февраля 2019

Вы можете просто изменить стиль своего элемента с помощью метода jQuery css, 

var invoker = $(e.relatedTarget);
invoker.css(<property>, <value>);

Просто измените <property> с атрибутом стиля, который вы хотите изменить, а затем <value> вы хотите установить.

Если вы хотите получить доступ к стилю из элемента, снова вы бы использовали css, на этот раз только с <property>.

...