评论：jQuery弹出层组件zeroModal  [查看原文]

cylansd0
2016/11/10 10:11:22
可以将 zeroModal的_tmp_last_zindex 值设置大点呢？

cylansd1
2016/11/10 13:11:49
或者在iframe外层引入zeroModal, 使用parent. zeroModal来调用

jQuery(function() {
	jQuery('#head_tan').qrcode(liveQR);
})；
function _ewm_look() {
	zeroModal.show({
		title: '二维码：',
		content: '<div class="head_tan" id="head_tan"></div>',
		width: '30%',
		height: '30%',
		transition: true,
		overlay: false
	});
}

你好，我要怎么获取动态生成的id:head_tan

cylansd1
2016/11/2 12:11:08

应该是先调用zeroModal.show({...})之后，才会去获取head_tan元素吧？在之前的话，dom里面都不会有head_tan元素，所以是获取不到的。

zeroModal.show({
       content: '<input type="text" id="aaa" />',
       onComplete: function(opt) {
               // todo something
               // $('#aaa').val('123');
       }
})

JiunJi0
2016/11/2 13:11:23
谢谢，问题解决了

function edit（id） {
	var obj = $("#" + id).html();
	zeroModal.show({
		title: 'test',
		coontent: obj,
		ok: true,
		cancel: true,
		okFn: function(opt) {
			alert($("#data").val());
		}
	});
}
------------------------------------- 
< div id = "modal" >
      <table width = "100%"id = "tb"align = "center" > 
          <tr >
                  <td > <input type = "text"id = "data" > </td>    
         </tr > 
      </table>
</div >

按钮触发edit

cylansd1
2016/10/31 19:10:59

你好，你的模板代码建议不要定义为html的div元素。因为定义后页面就已经存在一个id为data的元素，再用zeroModal展示会使为data的元素重复。建议模板直接放在type类型为text/html 的script中。

<script type="text/html" id="modal"><div id="data"></div></script>

cylansd1
2016/10/31 19:10:11
定义静态模板，同时你还可以额外引进mustache.js或artTemplate.js来配合使用的。

gaohan03210
2016/10/31 19:10:20
问题解决，非常感谢！

dobug0
2016/12/28 22:12:47

请问，我用你的示例代码，弹出框怎么是空的啊？盼回复

dobug0
2016/12/28 22:12:24

好吧，你的cootent多写了个o- -

cylansd0
2016/10/31 18:10:20

zeroModal.show({
	content: '<input type="text" id="test" />'
}); 
// 获取// 
document.getElementById('test').value$('#test').val()

gaohan03210
2016/10/31 18:10:44
我刚才试了一下用您的方式可以获取到，但是content中的值我是从页面获取的html，这种方式不可以吗？ 

cylansd0
2016/10/31 19:10:05
应该也是可以的，你可以把你写的代码发出来看看

新人求助~怎么构建弹框里面的内容呀？我找到了这行代码：

var _body = $('<div zero-unique-body="' + opt.unique + '" class="zeromodal-body" style="height:' + _bodyHeight + 'px;"></div>');
_container.append(_body);

但是编辑里面的内容我只会通过content: 'this is zeroModal',来编辑，不会增减div，求助！

cylansd0
2016/10/28 10:10:10
弹出modal后，是想要重新设置弹框的内容吗？

阳光宅男0
2016/10/28 11:10:59
恩。。我做网页设计，需要做不同风格的页面。。如果没有办法编辑弹框出来的内容和样式的话，感觉插件的实用性就很低了。。不知道别人是不是也这样。。

cylansd1
2016/10/28 11:10:28

如果只是想动态设置弹框的内容话，可以通过

var unique = zeroModal.show({...
});
// 修改弹框里面的内容
$('[zero-unique-body="' + unique + '"]').html('<div><h2>hello world</2></div>');

如果想统一设置的样式的话，只能通过修改zeroModal.css 来修改了。或者你可以将你想做的具体事情描述出来，再确认一个更好的方案

阳光宅男0
2016/10/28 11:10:23
谢谢你。。，不过修改弹框里的内容&样式修改我都找到了相应的代码。。。我想做的事情是，修改弹框里的结构，因为现在的代码弹框的content里只有一个class为zeromodal-body的div。举个例子，比如我想在弹框里增加一个dl>dt+dd的表格，或者在弹框里插入一张图片，我就不知道从哪里下手了。。我的意思是，如果能解决这个问题的话，就可以使用这一个弹框插件去做很多的功能，也可以自定义弹框的风格样式，这个插件的实用性也会非常非常高。

cylansd0
2016/10/28 12:10:38
非常感谢你提的建议。这个我也一直在考虑如何让组件更通用更灵活。目前比较矛盾的地方就是 如果配置项太多，对一部分使用者来说，使用起来更复杂更难接受。目前初步规划的思路是，额外再加一个zeroModal-override.js，用于对modal任意构建部分(head、body、foot等)来进行自定义重写。引用的时候 先引用zeroModal.js，再引用zeroModal-override.js来进行部分内容的覆盖。

阳光宅男0
2016/10/28 14:10:43
关注你了！期待那一天！

cylansd1
2016/10/28 10:10:13

你好，可以的，如果是在iframe里面的页面，可直接通过调用parent.zeroModal.closeAll()即可。如果是直接使用了zeroModal的自定义按钮属性无法关闭，可以将代码升级到最新

（http://git.oschina.net/cylansad/zeroModal）

即可。

The sun＆the seed0
2016/10/28 10:10:48
好的 ∩_∩ 谢谢 ！刚刚在 码云 也问了你 =-=@ Sad cylansad

cylansd0
2016/12/17 12:12:02
不客气，最近更新得比较少，过程中有问题可以尽量描述得更细致一些，以便于定位问题和提供解决方案

cylansd1
2016/10/26 19:10:39

您好，实际上ok和iframe是可以同时用的。一般ok和iframe同时使用的情况可能是，通过iframe来加载一个form表单，然后通过点击ok来去验证子iframe的填写的表单是否满足完整有效。针对这个场景建议参考下html5的postmessage API，结合postmessage 一起完成功能。给你提供一个

http://git.oschina.net/cylansad/postMessageDemo

例子参考。原理：

1. 点OK按钮，发送message给子iframe，同时return false；

2. 子页面添加消息监听，接收消息后处理自己的逻辑；

3. 处理完后，调用parent.zeroModal.closeAll()关闭modal即可。不知道是否解决你的问题？

cylansd1
2016/10/25 10:10:23

您好，建议将您的代码升级到最新。 

调用zeroModal.closeAll() 方法关闭全部；如果只要关闭指定的modal，使用zeroModal.close(unique)方法;如：

var unique = zeroModal.loading(); // 弹出等待
zeroModal.close(unique); //关闭

JianLee8888880
2016/10/24 11:10:46
效果是不错的 ，要是能加上拖拽功能就更好了

cylansd0
2016/10/25 14:10:19

拖拽功能升级到最新版本即可。

http://git.oschina.net/cylansad/zeroModal