語義UI模式更新設置未在'隱藏'上觸發

我可以在頁面加載時正確創建語義UI模式元素並更改transition和duration的默認設置。但是當我嘗試修改這些設置以通過onApprove隱藏模式時，它仍然使用與初始顯示一樣的設置。下面是相關的JS：語義UI模式更新設置未在'隱藏'上觸發

$(document).ready(function() { 
    $('#test').modal({ 
    transition: 'horizontal flip', 
    duration: 2000, 
    onApprove: function() { 
     $('#test').modal({ 
     transition: 'fade', 
     duration: 10000 
     }).modal('hide'); 
    } 
    }).modal('show'); 
});

這裏是一個JSFiddle演示問題。點擊「確定」按鈕應該會持續10秒鐘。奇怪的是，我可以在觸發onApprove後在代碼中放置一個斷點，並且看到設置確實已更新爲正確的值（例如，在semantic.js中，第9001行），並且當我點擊「resume」時轉換正確運行（Chrome 51.0.2704.103，Windows）。

我做不知道自己做錯了什麼在這裏...

來源

2016-07-14 grovduck

或者，你可以申請新的模式在屏幕顯示模態後立即設置。像：

$(document).ready(function() { 
 
    $('#test').modal({ 
 
    transition: 'horizontal flip', 
 
    duration: 2000, 
 
    onShow: function() { 
 
     $('#test').modal({ 
 
     transition: 'fade', 
 
     duration: 10000 
 
     }) 
 
    }, 
 
    onApprove: function(){ 
 
     $('#test').modal('hide'); 
 
    } 
 
    }).modal('show'); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.js"></script> 
 
<body> 
 
    <div id='test' class='ui large modal'> 
 
    <div class="header"> 
 
     Header 
 
    </div> 
 
    <div class="content"> 
 
     This is the content 
 
    </div> 
 
    <div class="actions"> 
 
     <div class="ui ok green basic button"> 
 
     OK 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

來源

2016-07-26 03:48:07

該訣竅。就好像新的設置在模式隱藏之前不會生效，但觸發show上的設置更改似乎是一種優雅的解決方法。 – grovduck

語義UI模式更新設置未在'隱藏'上觸發

回答

相關問題