像 Ionic 2 中的模态一样警报

2023-03-14前端开发问题
2

本文介绍了像 Ionic 2 中的模态一样警报的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我希望我的警报中有很多功能,所以我在一个模态中实现了所有的东西......现在我想将此模态切割为一个警报,例如不占用屏幕上的整个空间并在左侧的空间上显示 bg我们的模态.如下图所示

I wanted many functionalities in my alert so i implemented all the things in a modal...now i want to cutomize this modal as an alert like not taking the whole space on the screen and showing the bg on the space left outsude our modal. as shown in the image below

例如:你能告诉我如何在模态框之外实现,使它看起来像一个警报..在离子 2

eg: can you tell me ow to implement outside the modal so that it looks like an alert.. in ionic 2

请帮忙,谢谢

推荐答案

可以借助 scss 进行调整

You can adjust this with the help of scss

.modal-wrapper {
    position: absolute;
    width: 90%;
    height: 65%; 
    top: 20%;
    left: 5%;
  }

您可以根据需要更改内容的宽度、高度、顶部和左侧.请注意,修改此值将使您的应用程序中的所有模态都使用此配置而不是默认模态.

You can alter the content width, height, top and left as per your need. Kindly note that modifying this value will make all the modal in your application to use this configuration rather than the default modal.

要以灰色显示背景,请使用以下代码

To show the backdrop in grey color, use the below code

@media not all and (min-height: 600px) and (min-width: 768px) {
  ion-modal ion-backdrop {
    visibility: visible;
  }
}

这篇关于像 Ionic 2 中的模态一样警报的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

layui 单选框、复选框、下拉菜单不显示问题如何解决?
1. 如果是ajax嵌套了 页面, 请确保 只有最外层的页面引入了layui.css 和 layui.js ,内层页面 切记不要再次引入 2. 具体代码如下 layui.use(['form', 'upload'], function(){ var form = layui.form; form.render(); // 加入这一句});...
2024-11-09 前端开发问题
313

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

缩放背景图像以适合 ie8 窗口
Scale background image to fit ie8 window(缩放背景图像以适合 ie8 窗口)...
2024-04-19 前端开发问题
11

IE7 (IETEster) 中的@fontface 无法正常工作
@fontface in IE7 (IETEster) not working properly(IE7 (IETEster) 中的@fontface 无法正常工作)...
2024-04-19 前端开发问题
9

Safari 5.1 打破 CSS 表格单元格间距
Safari 5.1 breaks CSS table cell spacing(Safari 5.1 打破 CSS 表格单元格间距)...
2024-04-19 前端开发问题
3

如何使用 `on()` 委托 `hover()` 函数
How to delegate `hover()` function by using `on()`(如何使用 `on()` 委托 `hover()` 函数)...
2024-04-19 前端开发问题
17