微信weui弹窗效果(第四课)

2016年08月02日 12:08 | 4837次浏览 | 分类: 微信WeUI 作者原创 版权保护

【实例源码下载】

Dialog 弹窗

若系统的 alert 窗体无法满足网页的临时视图内容需求,则可以自定义实现与 alert 形式相似的 dialog,并且在 dialog 中可以自定义地使用各种控件,来满足需求。

本节课用到了jquery,所以不熟悉jquery的同学也没事,可以参考实例源码进行学习

在项目中新建dialog.jsp,引入微信的样式库weui.css文件,然后在引入依赖jquery的js库,我在这里呢引入的是网络js库 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

html代码

<br><br>
   <a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="dialog1">点击弹窗样式1</a>
   <a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="dialog2">点击弹窗样式2</a>
   
   <div class="weui_dialog_confirm" style="display: none;">
   <div class="weui_mask"></div>
   <div class="weui_dialog">
       <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
       <div class="weui_dialog_bd">自定义弹窗内容,居左对齐显示,告知需要确认的信息等</div>
       <div class="weui_dialog_ft">
           <a href="<%=basePath%>dialog.jsp" class="weui_btn_dialog default">取消</a>
           <a href="<%=basePath%>dialog.jsp" class="weui_btn_dialog primary">确定</a>
       </div>
   </div>
</div>
<br><br>
<div class="weui_dialog_alert" style="display: none;">
   <div class="weui_mask"></div>
   <div class="weui_dialog">
       <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
       <div class="weui_dialog_bd">弹窗内容,告知当前页面信息等</div>
       <div class="weui_dialog_ft">
           <a href="<%=basePath%>dialog.jsp" class="weui_btn_dialog primary">确定</a>
       </div>
   </div>
</div>

说明:第二行和第三行用到了weui的按钮,在这里呢,a链接的地址用到了javascript:void(0),意思就是阻止点击按钮跳转。

第六行和第18行是两个弹窗的div块,设置为隐藏状态。

js的实现逻辑是点击按钮1弹出弹窗样式1,点击按钮2,弹出弹窗样式2。实现代码如下:

<script type="text/javascript">
   jQuery(document).ready(function(){
    jQuery("#dialog1").click(function(){
     jQuery(".weui_dialog_confirm").show();
    });
    jQuery("#dialog2").click(function(){
     jQuery(".weui_dialog_alert").show();
    });
   
   });
   
  </script>

dialog.jsp代码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>弹窗效果</title>
    
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">         
	<link rel="stylesheet" type="text/css" href="resources/css/weui.css">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
  <br><br>
   <a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="dialog1">点击弹窗样式1</a>
   <a href="javascrit:void(0)" class="weui_btn weui_btn_primary" id="dialog2">点击弹窗样式2</a>
   
   <div class="weui_dialog_confirm" style="display: none;">
   <div class="weui_mask"></div>
   <div class="weui_dialog">
       <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
       <div class="weui_dialog_bd">自定义弹窗内容,居左对齐显示,告知需要确认的信息等</div>
       <div class="weui_dialog_ft">
           <a href="<%=basePath%>dialog.jsp" class="weui_btn_dialog default">取消</a>
           <a href="<%=basePath%>dialog.jsp" class="weui_btn_dialog primary">确定</a>
       </div>
   </div>
</div>
<br><br>
<div class="weui_dialog_alert" style="display: none;">
   <div class="weui_mask"></div>
   <div class="weui_dialog">
       <div class="weui_dialog_hd"><strong class="weui_dialog_title">弹窗标题</strong></div>
       <div class="weui_dialog_bd">弹窗内容,告知当前页面信息等</div>
       <div class="weui_dialog_ft">
           <a href="<%=basePath%>dialog.jsp" class="weui_btn_dialog primary">确定</a>
       </div>
   </div>
</div>
  </body>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  <script type="text/javascript">
   jQuery(document).ready(function(){
    jQuery("#dialog1").click(function(){
     jQuery(".weui_dialog_confirm").show();
    });
    jQuery("#dialog2").click(function(){
     jQuery(".weui_dialog_alert").show();
    });
   
   });
   
  </script>

</html>

效果如下:

此文章本站原创,地址 http://www.vxzsk.com/68.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程