一.实际项目中有很多如下界面效果。

  

二.该效果可以归结为弹出窗或者弹出层来实现的，为什么这么说？看如下代码：

    

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>弹出窗口和弹出层</title>

        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

        <script type="text/javascript">

            var showChildDiv=function(){

                $("#childDiv").show();

            };

        </script>

    </head>

    <body>

        <div style="width: 500px;height:400px; border: 1px solid red;">

         这是属于 父页面的层

         <input type="button" onclick="showChildDiv()"  value="弹出层"/>

        </div>

        <div id="childDiv"

            style="display: none; width: 300px; height: 300px; background-color: green; position: fixed; top: 100px; left: 200px;">

            这个是属于弹出层部分

        </div>

    </body>

</html>

弹出层

执行结果： 以定位的方式 指定位置显示div 的内容

注意：此时弹出的内容是完全存在于一张页面中，因此，div包含的元素，在该页面js中可以任意调用

虽然上面结果看起来和 一中图片类似，但实际实现完全不同。

知识点： <iframe>   标记 一定都不陌生，那么它的具体属性之类就不做介绍了，实际用到的主要是它的Src属性，利用div 包裹iframe，来实现弹出不同的页面，且父页面和子页面独立的逻辑不相互影响，有利于代码的维护和修改。

简单的例子如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>弹出窗口和弹出层</title>

        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

        <script type="text/javascript">

            var showChildDiv=function(){

                $("#childDiv").show();

            };

        </script>

    </head>

    <body>

        <div style="width: 500px;height:400px; border: 1px solid red;">

         这是属于 父页面的层

         <input type="button" onclick="showChildDiv()"  value="弹出层"/>

        </div>

        <div id="childDiv"

            style=" border: 1px solid red; display: none; width: 150px; height: 150px; background-color: green; position: fixed; top: 100px; left: 200px;">

            <iframe src="index.html" width="100%" height="100%" frameborder="0"></iframe>

        </div>

    </body>

</html>

那么此时可以发现，当前页面是弹出了一个新的页面，iframe src属性，来嵌套本地页面或者网页，来实现弹出层的效果。

三.父页面和子页面相互调用传值方式

对于很多后台开发或者前端来说这个方式，这实际是一个基础，那么怎么来调用呢？如下示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>弹出窗口和弹出层</title>

        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

        <script type="text/javascript">

            var showChildDiv=function(){

                $("#childDiv").show();

            };

            //方法名，和方法参数自定义，但是子页面调用父页面方法时，方法要对应上

            var currentPage=function(para){

                $("#result").html("from child page value:"+para)

            };

        </script>

    </head>

    <body>

        <div style="width: 500px;height:400px; border: 1px solid red;">

         这是属于 父页面的层

         <input type="button" onclick="showChildDiv()"  value="弹出层"/>

        </div>

   <div id="result">

   </div>

<div id="childDiv"

            style=" border: 1px solid red; display: none; width: 150px; height: 150px; background-color: green; position: fixed; top: 100px; left: 200px;">

            <iframe src="index.html" width="100%" height="100%" frameborder="0"></iframe>

        </div>

    </body>

</html>

父页面HTML

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

        <script type="text/javascript">

        //定义一个数组

        var jsonStudents=[];

        //数组中创建json对象

        for(var i=0; i <5;i++)

        {

          var jsonObj={ name:'',no:''};

          jsonObj.name='student_'+i.toString();

          jsonObj.no='current_no_'+i.toString();

          jsonStudents.push(jsonObj);

        }

        //根据json对象创建自己需要的html字符串

        var formatRow=function(obj){

            var rowHtml="<tr><td>"+obj.no+"</td>"

                        +"<td>"+obj.name+"</td></tr>";

                        return rowHtml;

        };

        //创建table，根据数据列表

        var createTable=function(){

           for(var i=0; i <5;i++)

            {

              var rowHtml=formatRow(jsonStudents[i]);

               $("table").append(rowHtml);

            }

        };

        var saveCheck=function(){

            window.parent.currentPage('我是子页面传递过去的值');

        };

        </script>

        <title></title>

    </head>

    <body onload="createTable()" style="background-color: yellow;">

        <table>

            <tr>

                <th>编号</th>

                <th>姓名</th>

            </tr>

        </table>

        <input id="btn_save" type="button" value="确认"  onclick="saveCheck()"/>

    </body>

</html>

子页面HTML

以上内容清楚的看到值的传递。

知识点：A 页面 打开 B页面 ,那么A就是 B的 parent ,那么B页面通过 window.parent.  来调用A页面的方法，页面元素，等等。

注意：在处理实际项目中，可能由于使用了部分插件的原因，首页要去区分弹出层和当前页面的关系，如果层中显示页面 是另外一张页面 那么就根据parent 来处理传值的问题，如果是属于一张页面，那么就把它当作是同一张页面 div 显示隐藏，同页面元素处理即可。

Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)的更多相关文章

  1. Jquery和Javascript 实际项目中写法基础 (1)

    一.JS 是什么,jquery 是什么  就不说明了,直接说一般使用是怎么样的 <!DOCTYPE html> <html> <head> <meta cha ...

  2. Jquery和Javascript 实际项目中写法基础-ajax和json (3)

    一.什么是JSON数据? 一种轻量级的数据交换格式.实际中知道如何使用即可. 软件开发我认为就是一个会用,然后知其原理的过程. 例子如下: <!DOCTYPE html> <html ...

  3. Jquery和Javascript 实际项目中写法基础-闭包 (2)

    一.什么是闭包? 概念性的我就不去百度了,感兴趣的可以自己去搜下,我自己的理解,闭包就是一个封装的包,相当于类的概念,把乱七八糟的的东西封装到一起,然后统一使用一个对象来调用,实现代码部分对外开放,部 ...

  4. JavaScript在HTML中的基础用法总结

    网页主要由三部分组成,分别为html.CSS和Javascript.如果说HTML是肉身,CSS是皮相,那Javascript就是灵魂.因此,三者的联系与融合则至关重要.本文就来为大家讲解一下Java ...

  5. ASP.NET MVC jQuery 树插件在项目中使用方法（一）

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  6. JQuery统一复写美化项目中所有radio单选按钮样式

    老项目要升级改版,对于分散在各页面的样式不好处理,怕有遗漏,尤其是优化input表单,修改其默认样式,接下来,我将给大家分享一下,我在项目中的总结. 效果 上代码: 1.简单搞一搞 CSS,此处代码有 ...

  7. 项目中lua(基础)

    关于项目中lua任务(某些没弄懂,但lua上耗费时间有点长了不看了) 这段时间看了lua语法和项目中lua应用 .在lua中注册c库,在lua5.2中好像都是注册c库,相当于在lua中定义一个tabl ...

  8. 【redis】5.spring boot项目中，直接在spring data jpa的Repository层使用redis +redis注解@Cacheable直接在Repository层使用，报错问题处理Null key returned for cache operation

    spring boot整合redis:http://www.cnblogs.com/sxdcgaq8080/p/8028970.html 首先,明确一下问题的场景 之前在spring boot整合re ...

  9. jQuery Validate验证（项目中使用的）

    大致结构是: <script type="text/javascript" src="<%=path %>/js/jquery-1.9.1.min.js ...

随机推荐

  1. 百度在线笔试编程测试题(Python)：整数分解成素数的积

    编程测试题: 输入一个正整数将其分解成素数的乘积,输入格式连续输入m个数,然后将这m个数分别分解,如 输入: 2 10 20 输出: 2 5 2 2 5 Python code: def primes ...

  2. 开发Blog整理

    开发Blog记录 清理收藏夹 太多了,来不及看了. http://blog.sina.com.cn/s/blog_67d95f40010113ec.htmlhttp://segmentfault.co ...

  3. 【转】PostgreSQL分布式事务配置

    XA是open group提出的分布式事务处理规范,JTA支持XA规范,JTA只规定了接口,有些应用容器提供实现,也有一些三方的开源实现可用,比如Atomikos. 如果PostgreSQL参与分布式 ...

  4. go语言环境搭建

    1.官网https://golang.org/dl/下载go语言的执行器 2.此处以Windows操作系统上安装go为例,安装go1.7.3.windows-amd64.msi 3.配置go环境变量, ...

  5. C——数组下标与间址运算符

    只说一句,数组下标与间址运算符*是等价的,即:a[i] = *(a+i),看代码: int main(int argc, char* argv[]) { ] = {, , , , }; int i; ...

  6. [转] c# 模拟Asp.net页面中的某个按钮的点击，向web服务器发出请求

    在没有做题目中所述的内容的时候,感觉这应该是很简单的东西,但是当真正开始做的时候却发现,有很多问题现在在这里写出来,供和我一样水平不高的参考一下. 在写本文之前参照了一下文章 欢迎使用CSDN论坛阅读 ...

  7. Eclipse插件开发中对于Jar包和类文件引用的处理（彻底解决插件开发中的NoClassDefFoundError问题）（转）

    目的:Eclipse插件开发中,经常要引用第三方包或者是引用其他插件中的类,由于插件开发环境引用类路径的设置和运行平台引用类路径的设置不同,经常导致开发过程OK,一旦运行则出现NoClassDefFo ...

  8. ros语音交互（四）移植科大讯飞语音识别到ros

    将以前下载的的语音包的 samples/iat_record/的iat_record.c speech_recognizer.c speech_recognizer.c 拷贝到工程src中, linu ...

  9. C/C++中的NULL讨论和总结

    代码如下 #include <stdio.h> int main(){ int *p; p = NULL; printf("p=0x%x\n",p); typedef ...

  10. RHEL6.4编译安装企业级LAMMP平台

    一.LAMMP简介 二.使用软件及服务器架构说明 三.配置及安装过程    1.安装arp与httpd    2.安装mysql    3.安装php(php-fpm)    4.安装Xcache   ...