Семантический пользовательский интерфейс, удалить автофук при раскрытии - PullRequest
Новая
       15

Семантический пользовательский интерфейс, удалить автофук при раскрытии

0 голосов
/ 15 января 2019

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

function showmodal() {
  $('.ui.modal').modal('show');
}
if ($('.ui.dropdown').length) {
  $('.ui.dropdown').dropdown({
    useLabels: false,
    forceSelection: false,
    autoFocus: false
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="content">
    <form action="" class="ui form">
      <div class="field mandatory">
        <label>Gender</label>
        <select class="ui dropdown">
          <option value="">Gender</option>
          <option value="1">Male</option>
          <option value="0">Female</option>
        </select>
      </div>
    </form>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>


<button class="ui button" onclick="showmodal()">Click to Open Modal</button>

Я пробовал autoFocus: false, но он не работает.

Ответы [ 2 ]

0 голосов
/ 15 января 2019

Свойство, которое вы ищете, является showOnFocus: False 

$(function(){
    $('.ui.button').click(function(){ showmodal() })
  function showmodal() {
    $('.ui.modal').modal('show');
  }
  if ($('.ui.dropdown').length) {
    $('.ui.dropdown').dropdown({
      showOnFocus: false
    });
  }
})

https://jsfiddle.net/q48s3voj/1/

0 голосов
/ 15 января 2019

Вам нужно поставить autoFocus: false перед modal('show'): 

function showmodal() {
  $('.ui.modal').modal({
    autofocus: false,
  }).modal('show');
}
if ($('.ui.dropdown').length) {
  $('.ui.dropdown').dropdown({
    useLabels: false,
    forceSelection: false
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="content">
    <form action="" class="ui form">
      <div class="field mandatory">
        <label>Gender</label>
        <select class="ui dropdown">
          <option value="">Gender</option>
          <option value="1">Male</option>
          <option value="0">Female</option>
        </select>
      </div>
    </form>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>


<button class="ui button" onclick="showmodal()">Click to Open Modal</button>

JSFiddle: https://jsfiddle.net/wvpqf9t2/

...