Semantic UI modal aktualisierte Einstellungen nicht ausgelöst 'ausblenden'

Ich kann ein semantic-ui modales Element korrekt erstellen und die Standardeinstellungen für transition und duration beim Laden der Seite ändern. Aber wenn ich versuche, diese Einstellungen zu ändern, um das Modal durch onApprove auszublenden, verwendet es immer noch die gleichen Einstellungen, die mit der ursprünglichen Show verwendet wurden. Hier ist der relevante JS:Semantic UI modal aktualisierte Einstellungen nicht ausgelöst 'ausblenden'

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

hier ein JSFiddle ist, der das Problem demonstriert. Wenn Sie auf die Schaltfläche "OK" klicken, sollte eine Überblendung von 10 Sekunden ausgelöst werden. Das Seltsame ist, dass ich nach dem Auslösen der onApprove einen Breakpoint in den Code setzen kann und sehe, dass die Einstellungen tatsächlich auf korrekte Werte aktualisiert wurden (zB in semantic.js, Zeile 9001) und der Übergang korrekt ausgeführt wird, wenn ich 'resume' drücke (Chrome 51.0.2704.103, Windows).

nicht sicher, was ich falsch hier tun ...

Quelle

2016-07-14 grovduck

Alternativ können Sie die neue modale unmittelbare Einstellung anzuwenden, nachdem die modalen auf dem Bildschirm angezeigt wird. Wie:

$(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>

Quelle

2016-07-26 03:48:07

, die den Trick tat. Es ist so, als ob die neuen Einstellungen nicht vor dem modalen Verbergen wirksam werden, aber das Auslösen der Einstellungsänderung auf der Messe scheint wie ein eleganter Workaround zu sein. – grovduck

Semantic UI modal aktualisierte Einstellungen nicht ausgelöst 'ausblenden'

Antwort

Verwandte Themen