打开语义 ui 模态时背景略有变化

Question

我正在尝试制作具有语义的页面 ui，使用模式来显示内容。每当我打开模态时，背景都会轻微移动，这非常不愉快。一个（有点）最小的例子： https://jsfiddle.net/13nhs29a/

<!DOCTYPE html>
<html lang="en">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>


<body>
<div class="ui container">
    <h1 style="margin-top: .5em;">Serious tests</h1>
    <div class="ui button primary" id="btn" onclick="$('#modal').modal('show')">show</div>

    <div id="modal" class="ui tiny modal">
        <i class="close icon"></i>
        <div class="header">Provide an email address and confirm your password</div>
        <div class="actions">
            <div class="ui positive button">
                ok
            </div>
        </div>
    </div>
</div>


</body>
</html>

Answer 1

为 h1

删除 margin

<h1>Serious tests</h1>

https://jsfiddle.net/lalji1051/90eznqus/

打开语义 ui 模态时背景略有变化

background shifts slightly upon opening a semantic ui modal

html

modal-dialog

semantic-ui