关于simplemodal的动态加载

今天收到一个request，需要动态加载simplemodal的弹出框，也就是说在同一页面中，根据点击的链接不同，加载的内容也将不同，其实实现起来真的很简单。请看如下代码：

 1$i = 1; 2while($data = db_fetch_object($result)) 3{ 4 　　$desc = $data->body; 5?> 6<a href='#' οnclick="$('#basic-modal-content<?php echo $i; ?>').modal()" class='basic'><?php echo $data->title;?></a><br /><br /> 7 8<!-- modal content --> 9<div id="basic-modal-content<?php echo $i ?>" style="padding-top:10px; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; display:none;">10<?php echo isset($desc) ? $desc : '';?>            11</div>1213<?php 14    $i++;15}

首先，我在链接中定义了循环的basic-modal-content的ID；其次，需要定义这些ID为basic-modal-content的style为none，否则内容将会显示在页面上。一切就是这么easy，关键点我已标红。

下面这个例子是我在网上刨出来的，父页面向子页面传值得例子，希望能给大家一些启发。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   2 <HTML>   3 <HEAD>   4 <TITLE> New Document </TITLE>   5 <SCRIPT LANGUAGE="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js"></SCRIPT>   6 <script src="http://simplemodal.googlecode.com/files/jquery.simplemodal-1.3.3.js"></script>   7 <SCRIPT LANGUAGE="JavaScript">   8 <!--    9     $(function(){   10         $("#btn1").click(function(){   11             $('<div><input type="text"/></div>').modal({   12                 escClose:true,   13                 close:true,   14                 closeHTML:"<a href='#'>Close</a>",   15                 onShow:function(dialog){   16                     $("input",dialog.data).val($("#input1").val())}   17             });   18         })   19     })   20 //-->  21 </SCRIPT>  22 <style>  23 #simplemodal-overlay {background-color:#000;}   24 #simplemodal-container {background-color:#333; border:8px solid #444; padding:12px;color:#FFF}   25 </style>  26 </HEAD>  27   28 <BODY>  29 <input type="text" id="input1"/>  30 <input type="button" id="btn1" value="test"/>  31 </BODY>  32 </HTML>

转载于:https://www.cnblogs.com/droko/archive/2011/10/24/2222360.html

关于simplemodal的动态加载相关推荐

js 动态加载select触发事件
动态加载select后,手动调用一下 subjectChange函数,模拟触发change事件 function hallidChange(value) {$.ajax({type: "po ...
cascader 动态加载回显_ElementUI cascader级联动态加载回显和搜索看这个就够了
这一篇是上一次讨论cascader级联动态加载回显问题的延续,文末有链接. 以下是思考和开发的过程,不感兴趣可以直接看使用文档. https://github.com/zhuss/lazy-casca ...
C#动态加载DLL（转）
利用反射进行动态加载和调用. Assembly ass=Assembly.LoadFrom(DllPath); //利用dll的路径加载加载dll后,需要使用dll中某类. Type type=as ...
利用反射实现类的动态加载
为什么80%的码农都做不了架构师?>>> //首先定义一个接口来隔离类: public interface Operator { // public java.util.Lis ...
利用 JQuery的load函数动态加载页面
利用JQuery的load函数动态加载页面 JQuery有好多Ajax函数,其中load是用来动态加载一个页面的内容到指定的dom元素上. 我们来做个例子: 做一个上下(左右)结构的页面,其中下左部分 ...
插件化知识梳理(7) 类的动态加载入门
一.前言在插件化知识梳理(6) - Small 源码分析之 Hook 原理这一章的学习完成之后,下一步我们将进入插件化加载的精髓,动态加载类的学习,在此之前,我们需要先准备一些关于类加载的知识. ...
spark-submit --files 动态加载外部资源文件
在做spark时,有些时候需要加载资源文件,需要在driver或者worker端访问.在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取,需要如下代码: val is ...
Android动态加载jar/dex
http://www.cnblogs.com/over140/archive/2011/11/23/2259367.html 加载jar boolean bool = new File("/ ...
go加载python_人生苦短我用python（02）动态加载模块-Go语言中文社区
文章内容为原创,欢迎转载请注明出处作者: EflyPro->晦明禅师文章来源:公众号"睿江云计算" 继第一期[人生苦短我用Python系列专栏]发布后,深受广大睿普迷的一 ...

关于simplemodal的动态加载

关于simplemodal的动态加载相关推荐

最新文章

热门文章