手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> 手机 >> 手机端使用提示样式

手机端使用提示样式

19460 手机 | 2015-5-5

由于本人美工不太好,所以每次做东西时,样式就是让我头疼到死的问题。所以有一些好的样式,我总是搜集起来。这次摘取了工程中用于手机端的一个样式,很简单,但是也实用。

最后的效果如下:

 

手机端提示样式

 

另外提示各位,做手机端展示的测试,最好用Google Chrome浏览器。

还有就是这个样式基于Jquery,所以要导入相关文件。

CSS样式带如下:

@charset "UTF-8";
/*=========底部提示样式========*/
body{font:14px/1.4 sans-serif; *font-size: small;word-wrap:break-word;margin:0 auto;-webkit-text-size-adjust: none; height:100%; color: #474747;}
a{ text-decoration:none; color:#474747}
.full_mark,.full_mark2{
background-color:#000;opacity:0.2;position:fixed;width:100%;height:100%;top: 0px;left: 0px;display: none;
}
.popup_alert2{
    width: 100%;
    position: fixed;
    bottom:0px;
    font-size: 1em;
    background:rgba(0,0,0,0.7) url(alert.png) no-repeat 6% center;
    background-size:auto 60%;
    display: none;
}
.popup_alert2 .cnt_details{
    padding:16px 0px;
    text-align: center;
    color: #fff;
    
}
/*=========底部提示样式========*/

JS代码如下:

$(function(){
    //遮罩
    $(".full_mark").click(function(){
        $(this).hide();
        $(".full_img_wrapper").hide();
        $(".popup_alert2").hide();
    })   
})

使用代码如下:

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="css.css">
 <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
 <!-- 温馨提示,JQuery的导入要在最前面,否则引用的JS文件里面使用JQuery则无效 -->
 <script type="text/javascript" src="js.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no"/>
 <script type="text/javascript">
 function login(){
  $("#backgroup").css("display","block");
  $("#tixingimessage").css("display","block");
  $("#message_err").text("您好,谢谢您关注该提示");
 }
 </script>
</head>
<body onload="login()">
您好,请注意相关提示
</body>
</html>
<div style="display:none" id="backgroup"></div>   
<div style="display:none" id="tixingimessage">
    <div>
       <span id="message_err"></span> 
    </div>
</div>

打包下载地址:

alert.zip

点击上面连接进行下载。

推荐您阅读更多有关于“ 样式 手机端 JQUERY 提示框 ”的文章

上一篇:Apache Commons Codec 下一篇:10款免费而优秀的图表JS插件

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 也许大家都已经注意到了,今年的房价,好多地方都是翻了一番,跟着就是,各地房东开始变相涨租。今年之所以搬走,就是为此,这两天同学也是如此。很多房东只认钱,别谈感情,伤钱。而对于这个城市来说,你怎么定位自己,你真把自己当成她的一份子?你来此为何?将来何去何从?自己掂量清楚。

    2016-12-05 10:03

  • 为什么一直不写了呢?因为当爸爸了,没空了。今年的冬天,有些寒冷,除了这寒冬带来的不适,更有因乐视公司遇到危机,而带来的同事别离。送别同事,看着空旷的工位,心中有些悲凉。临近年关,此时此刻,该怎么做,似乎不再是脑子一热那么简单了。

    2016-11-24 11:28

  • 已经请假,加上国庆,要很长一段时间不在北京了。919加班,搞的现在有点心累,胸闷,身体不适。看来,我要好好休息一下了。这几天有些冷,2016的冬天,一步步来了,各位亲友,记得添衣加粗啊。

    2016-09-23 17:29

  • 更多»

最新文章
热门文章
随机文章