将 HTML 数据属性传递给语义 UI 模态

Question

我有一个项目列表，每个项目都有不同的数据类型，单击时我想将 data-type="name" 作为变量传递给语义 UI 模态.

<a class="segment__item u-cf" id="modal" data-type="name">
    ...
</a>

我可以在点击时触发模态罚款

$('#modal-newpage')
    .modal('attach events', '#newpage', 'show')
    .modal('setting', 'duration', 280)
    .modal('setting', 'closable', false);

但是，我想对所有项目使用相同的模式（标题为 data-type "name"）而不创建多个模式实例，我不确定如何将数据传递给它？

Answer 1

data-type 不应该一直改变......我会在模式中使用隐藏的 input 来处理变化的值：

HTML:

<div id="modal" class="ui modal">
  <input class="type" type="hidden">
  ...
</div>

JS:

$('button').click(function() {
  $('#modal input.type').val('name');
  $('#modal').modal('show');
  ...
})

Answer 2

@wafield 已经回答了这个问题。但是，如果对其他人有帮助，这里有更详细的解释：

$('.segment__item').click(function() {
    $pagetype = $(this).data('type');
    $('#modal-newpage')
        .modal('show')
        .modal('setting', 'duration', 280)
        .modal('setting', 'closable', false);
    $('h1.modal__title').text("New " + $pagetype + " page");
    $('form').attr('action', $('form').attr('action') + $pagetype);
    $('input[name=page_type]').val($pagetype);
});

将 HTML 数据属性传递给语义 UI 模态

Pass HTML data attribute to a Semantic UI modal

jquery

html

modal-dialog

custom-data-attribute

semantic-ui