Modal 模态方式

模态对话框与过渡样式在iOS开发中的应用


/*! 模态的几种方式
 typedef NS_ENUM(NSInteger, UIModalPresentationStyle) {
 UIModalPresentationFullScreen = 0,
 UIModalPresentationPageSheet NS_ENUM_AVAILABLE_IOS(3_2),
 UIModalPresentationFormSheet NS_ENUM_AVAILABLE_IOS(3_2),
 UIModalPresentationCurrentContext NS_ENUM_AVAILABLE_IOS(3_2),
 UIModalPresentationCustom NS_ENUM_AVAILABLE_IOS(7_0),
 UIModalPresentationOverFullScreen NS_ENUM_AVAILABLE_IOS(8_0),
 UIModalPresentationOverCurrentContext NS_ENUM_AVAILABLE_IOS(8_0),
 UIModalPresentationPopover NS_ENUM_AVAILABLE_IOS(8_0),
 UIModalPresentationNone NS_ENUM_AVAILABLE_IOS(7_0) = -1,
 };
 */

/*
typedef NS_ENUM(NSInteger, UIModalTransitionStyle) {
    UIModalTransitionStyleCoverVertical = 0,
    UIModalTransitionStyleFlipHorizontal,
    UIModalTransitionStyleCrossDissolve,
    UIModalTransitionStylePartialCurl NS_ENUM_AVAILABLE_IOS(3_2),
};
 */
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    ModalTableViewController *modalVC = [[ModalTableViewController alloc] init];
    
    //modalVC.modalPresentationStyle = UIModalPresentationCurrentContext;
    modalVC.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    [self presentViewController:modalVC animated:YES completion:nil];
}


### 创建带黑色背景的模态对话框 为了创建一个带有黑色背景的模态对话框,可以采用CSS和HTML相结合的方式。通过定义特定的类来控制模态窗口及其遮罩层的行为。 #### HTML结构 首先构建基本的HTML框架用于展示模态对话框: ```html <div id="myModal" class="modal"> <!-- 遮罩层 --> <div class="modal-background"></div> <!-- 对话框内容 --> <div class="modal-content"> <span class="close">×</span> <p>一些文本...</p> </div> </div> <button id="openModalBtn">打开 Modal</button> ``` #### CSS样式 接着应用CSS以确保点击按钮时能够显示具有黑色半透明背景的模态对话框,并且阻止页面其他部分响应触摸或鼠标事件[^1]。 ```css /* 整体模态 */ .modal { display: none; /* 默认隐藏 */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; } /* 黑色半透明背景 */ .modal .modal-background { background-color: rgba(0, 0, 0, 0.7); /* 设置为不完全透明的黑底 */ position: absolute; width: 100%; height: 100%; } /* 中心居中的白色弹窗 */ .modal-content { background-color: white; margin: auto; padding: 20px; border-radius: 8px; max-width: 500px; text-align: center; position: relative; top: 20%; /* 调整垂直位置 */ } ``` #### JavaScript交互逻辑 最后利用JavaScript实现模态对话框的开关功能: ```javascript // 获取DOM元素 var modal = document.getElementById("myModal"); var btn = document.getElementById("openModalBtn"); var span = document.getElementsByClassName("close")[0]; // 当用户点击按钮时开启模态 btn.onclick = function() { modal.style.display = "block"; } // 用户点击关闭图标"x"则关闭模态 span.onclick = function() { modal.style.display = "none"; } // 如果用户在任何地方点击,则关闭模态 window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 上述代码片段展示了如何使用简单的HTML、CSS以及少量JavaScript创建并管理一个拥有黑色背景覆盖效果的模态对话框。此方法适用于大多数Web应用程序场景,在保持用户体验的同时提供必要的视觉反馈给用户。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值