Question

如何将此onsenUi对话框打开为全屏？我在这个对话框中有一个图像。

  <ons-dialog style="width:305px;height:400px;" var="naviDialog" cancelable>

        <ons-navigator var="myNav">
            <ons-toolbar inline>
                <div class="center">
                   text sample
                </div>
            </ons-toolbar>

            <div class="dialog">
                <p>
                     <img src="images/picone.png"/>

                </p>

            </div>
        </ons-navigator>
    </ons-dialog>

Answer 1

我找到了办法

<ons-dialog style="width:100%; height:100vh;" var="naviDialog" cancelable>

Answer 2

为了使其根据图像大小而变化，我做了以下工作：

/* under CC0 waiver */

.dialog{
    width: auto;
    max-width: 90%;
}

.dialog img{
    width: auto;
}

希望它有助于其他人

温泉Ui对话全屏

2 个答案: