对话框

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Modal 就是对话框 .. 对话框可以直接在当前的页面上显示 .. 用户可以根据对话框的内容,进一步去处理一些事情 ..

在这个页面上,我们先去添加一个对话框内容 .. 先给它添加一个包装 .. 用一个 div ... 在上面要加上 ui .. 还有 modal ..

下面我们可以先让这个对话框显示出来 .. 添加一行 JavaScript .. 找到页面上的对话框的包装元素 .. 然后调用 modal 方法 .. 再给它一个参数 .. 参数的值是 show .. 意思是让这个对话框显示出来 ..

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

现在页面上会出现一个暗色的背景 .. 这应该是 dimmer 模块提交的功能 .. 下面我们再继续去设置对话框里的内容 ..

先给对话框添加一个标题 .. 用一个标题标签 .. 上面加上一个 header 类 .. 再输入对话框的标题内容 .. (#保存)

对话框里的内容可以放在一个带 content 类的容器里 .. 用一个 div .. 上面加上 content 类 ... 在里面再添加一些内容 .. (#保存)

在对话框里也可以包含一些动作,一般就是一些按钮 .. 这些动作放在一个 actions 容器里 .. div.actions .. 在里面添加两个按钮 .. 一个是表示负面动作的按钮 .. button.ui.negative.button .. 按钮上的文字是 否 .. 再添加一个正面动作的按钮 .. button.ui.positive.button .. 按钮上的文字是 是 ..

现在,你看到的,就是一个标准的对话框的样子 ..

对话框《 Semantic UI 模块 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点