semantic-ui Modal-Größe erstreckt sich auf die Höhe einer Seite

Ich versuche, ein grundlegendes Modal zu implementieren, aber seine Größe wird auf die Höhe einer Seite erweitert.semantic-ui Modal-Größe erstreckt sich auf die Höhe einer Seite

Trigger-Code:

$('.ui.modal.apply-modal').modal('show');

Modal-Code:

<div class="ui modal apply-modal"> 
<i class="close icon"></i> 
<div class="header"> 
    Modal Title 
</div> 
<div class="content"> 
    facebook 
</div> 
<div class="actions"> 
    <div class="ui button">Cancel</div> 
    <div class="ui button">OK</div> 
</div>

Modal Window

Quelle

2015-05-20 Michael Khait

Es scheint, als ob Sie die modale Größe nicht mit den jQuery-Plugin-Optionen festlegen können, stattdessen CSS verwenden, wenn Modal geöffnet ist, klicken Sie darauf und drücken Sie "Inspect Element", überprüfen Sie das CSS und ändern Sie es entsprechend. – odedta

Es stellt sich heraus, dass Bootstrap Paket mit Semantic-UI Paket in Konflikt ich verwende.

einfach, indem Sie:

meteor remove twbs:bootstrap

Dinge wurden gelöst. Zugegeben, keine ideale Lösung, aber ich sollte nicht beide Frameworks gleichzeitig benutzen.

enter image description here

Nun, nach etwa zwei Stunden der Fehlersuche ....

Quelle

2015-05-20 06:39:17

hatte ich das gleiche Problem. Meine Lösung war die CSS der modalen Komponente von Semantic UI auf diese Weise ändern:

.modal { position: relative;} or #myModal { position: relative;} 

<div id="myModal" class="ui small modal"></div>

Es funktioniert für mich, ich hoffe, Ihnen zu helfen. Ich stimme Michael Khait zu, dieses Problem tritt möglicherweise bei jedem Konflikt zwischen Boostrap und Semantic UI auf

Quelle

2016-11-23 22:11:50 yaircarreno

semantic-ui Modal-Größe erstreckt sich auf die Höhe einer Seite

Antwort

Verwandte Themen