>我在模态框中使用语义 UI 下拉列表,每当打开模态时,其中的下拉列表都会自动打开。
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
,但它不起作用。
您需要
将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/
您要查找的属性是 showOnFocus: 假
$(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/