セマンティック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があります。「OK」ボタンをクリックすると、フェードが10秒間続きます。奇妙なことは、onApproveをトリガした後でコードにブレークポイントを置くことができ、セマンティクス（たとえばsemantic.js、9001）の設定値が正しい値に更新され、（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

。これは、新しい設定がモーダルの隠しの前に有効にならないかのようですが、ショーの設定の変更を誘発するのはエレガントな回避策のようです。 – grovduck

セマンティックUIのモーダル更新設定が「非表示」でトリガーされない

答えて

関連する問題