父页面index.html结构
<html> <head> <meta charset="UTF-8" /> <title></title> </head> <frameset rows="48px,*" frameborder="0"> <frame src="header.html" frameborder="0"> <frameset cols="25%,75%" frameborder="0"> <frame src="left.html" frameborder="0"> <frame src="content.html" frameborder="0"> </frameset> </frameset></html>content.html页面结构
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/master.css" /> <link rel="stylesheet" href="css/layer.css" /> <style> body{ background: #fff; } .button-block>a{ margin: 10px; padding: 10px; background: #00B94D; font-size: 16px; color: #fff; text-align: center; } </style> </head> <body> <p>正文内容</p> <div class="button-block"> <a href="javascript:void(0);">按钮</a> </div> <script type="text/javascript" src="../js/jquery-1.10.1.min.js" ></script> <script type="text/javascript" src="js/layer.js" ></script> <script> $(".button-block a").click(function() {layer.confirm('您是如何看待前端开发？', { btn: ['重要','奇葩'] //按钮}, function(){ layer.msg('的确很重要', {icon: 1});}, function(){ layer.msg('也可以这样', { time: 20000, //20s后自动关闭 btn: ['明白了', '知道了'] });}); }); </script> </body></html>效果如图
如图所示弹框是显示在子页面内，相对整个html是偏移的
我现在的问题是能不能在index.html页面写content.html里.button-block a 的click事件呢
例如这样
index.htmlcontent.html解决方案
你试试看
<frame id="iframe" src="content.html" frameborder="0">$(function () { $('#iframe').load(function(){ $('#iframe').contents().find('.button-block').click(function () { alert('click'); }); })})