Shadowbox - 如何切换或替换内容？(Shadowbox - How to switch or replace content? How to close and open another dialog?)
我试图在多个场合使用shadowbox：有时我碰巧需要同时有多个对话框。
在这个简单的例子中，我尝试关闭一个现有窗口并重新打开另一个窗口，但不打开第二个窗口。 我做错了什么？
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="shadowbox.css" type="text/css"> <style type="text/css" media="screen"> #sb-body, #sb-loading { background:#eee; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script src="shadowbox.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Shadowbox.init(); window.onload = function(){ Shadowbox.open({ content: 'First window. <a id="open-second" href="http://www.google.com">open another window</a>.', player: "html" }); $('#open-second').live('click', function(e){ e.preventDefault(); Shadowbox.close(); Shadowbox.open({ content: 'Second window.', player: "html" }); }); }; </script> </head> <body>blabla.</body> </html>问候， 平硐
I'm trying to use shadowbox in multiple occasions: sometimes I happen to need more than one dialog at the same time.
In this simple example I try to close one existing window and re-open another one but is not opening the second one. What I'm doing wrong?
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="shadowbox.css" type="text/css"> <style type="text/css" media="screen"> #sb-body, #sb-loading { background:#eee; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script src="shadowbox.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Shadowbox.init(); window.onload = function(){ Shadowbox.open({ content: 'First window. <a id="open-second" href="http://www.google.com">open another window</a>.', player: "html" }); $('#open-second').live('click', function(e){ e.preventDefault(); Shadowbox.close(); Shadowbox.open({ content: 'Second window.', player: "html" }); }); }; </script> </head> <body>blabla.</body> </html>Regards, Adit
最满意答案
对不起'回合，但我想我会走向colorbox，因为它似乎更稳定：
$('#second-btn').live('click', function(e){ e.preventDefault(); $.colorbox({ onComplete: function(){ $('#cboxLoadedContent').append('second opened'); $('#cboxClose').attr('id', 'cboxClose_disabled'); }, html:'<p>Second <a id="first-btn" href="x">first</a></p>', width: 500, height: 200 }); }); function showfirst(){ $.colorbox({ onLoad: function(){ $('#cboxClose_disabled').attr('id', 'cboxClose'); }, onComplete: function(){ $('#cboxLoadedContent').append('first opened') }, html:'<p>First <a id="second-btn" href="x">second</a></p>', width: 500, height: 200 }); } $('#first-btn').live('click', function(e){ e.preventDefault(); showfirst() }); showfirst();嘿，我是一个人说话吗？！ XD
Sorry 'bout this, but I think I'll move towards colorbox as it seems far more stable:
$('#second-btn').live('click', function(e){ e.preventDefault(); $.colorbox({ onComplete: function(){ $('#cboxLoadedContent').append('second opened'); $('#cboxClose').attr('id', 'cboxClose_disabled'); }, html:'<p>Second <a id="first-btn" href="x">first</a></p>', width: 500, height: 200 }); }); function showfirst(){ $.colorbox({ onLoad: function(){ $('#cboxClose_disabled').attr('id', 'cboxClose'); }, onComplete: function(){ $('#cboxLoadedContent').append('first opened') }, html:'<p>First <a id="second-btn" href="x">second</a></p>', width: 500, height: 200 }); } $('#first-btn').live('click', function(e){ e.preventDefault(); showfirst() }); showfirst();Hey, am I talking alone?! XD
更多推荐
发布评论