js弹窗小例子

布局大概是这样:

Paste_Image.png

首先,弄一个DIV,把弹窗的模子弄出来。 <divid="box"style="width:300px;height:180px;background:rgb(51,133,255);">

Paste_Image.png

嗯,主题就规定为蓝色吧。

第二步,添加标题栏。

因为继承;额父盒子的背景色,所以还看不出变化。接着,通过下面的代码将父盒子分成三块。

这样层次就出来了:

Paste_Image.png

给标题栏加上文字和关闭按钮。

Paste_Image.png

接下来,设置底部的按钮。(代码比较繁琐,还没有优化,就不贴代码了)

大概是这个样子:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张高兴的博客

张高兴的 Xamarin.Forms 开发笔记:为 Android 与 iOS 引入 UWP 风格的汉堡菜单 ( MasterDetailPage )

552100
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

该组件将自己发布为DropdownHandle,因此其子级可以通过注入来控制其可见性:

20330
来自专栏一“技”之长

AppleWatch开发入门五——菜单控件的使用

        菜单也是WatchOS中一个重要的交互方式,限于Watch的屏幕尺寸,若将所有用户交互控件都紧密的排列进展示的UI中,那样难免会使用户操作困难,...

27710
来自专栏青玉伏案

iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果

  在公司做项目一直使用Storyboard,虽然有时会遇到团队合作的Storyboard冲突问题,但是对于Storyboard开发效率之高还是比较划算的。在之...

22780
来自专栏前端知识分享

第58天:简单焦点轮播图

10230
来自专栏大数据钻研

css print

最近做表单打印,遂整理了一些打印相关的内容。 说到网页打印,首先想到的便是@media查询(即网页css),通过使用媒体类型print即可解决实际应用的大多数...

32730
来自专栏林德熙的博客

win10 uwp 标题栏 扩展标题栏修改颜色透明标题栏 系统状态栏

我们应用最上方的是标题栏,对于手机,最上方是状态栏。 我们可以自定义标题栏,和不显示标题栏。

46020
来自专栏吴伟祥

IDEA的快捷键应用 原

Ctrl+Shift+Alt+鼠标 (左手按着ctrl+shift+alt右手鼠标点击想要选择的位置)

11030
来自专栏编程微刊

6款 jQuery Lightbox图片查看触控插件

偶然间在网上看到的几个图片预览的插件,挺好用的,顺手整理下来。 1:Zoomify – jQuery缩放效果lightbox插件 地址:http://www...

55340
来自专栏飞扬的花生

一步一步学习Bootstrap系列--表单布局

前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把...

353100

扫码关注云+社区

领取腾讯云代金券