0
如果用户没有登录我的网站我想要触发一个弹出窗口加载而不会将用户关闭到另一个页面。我一直试图用这个代码来做到这一点，但我无法得到它的工作原因。我的错误在哪里？太感谢了。在href上触发弹出窗口 - 请登录消息
代码：http://jsfiddle.net/gyeo03nk/1/
// POPUP WINDOW CODE
$(document).ready(function() {
\t // if user clicked on button, the overlay layer or the dialogbox, close the dialog \t
\t $('a.btn-ok, #dialog-overlay, #dialog-box').click(function() { \t \t
\t \t $('#dialog-overlay, #dialog-box').hide(); \t \t
\t \t return false;
\t });
\t
\t // if user resize the window, call the same function again
\t // to make sure the overlay fills the screen and dialogbox aligned to center \t
\t $(window).resize(function() {
\t \t
\t \t //only do it if the dialog box is not hidden
\t \t if (!$('#dialog-box').is(':hidden')) popup(); \t \t
\t }); \t
\t
\t
});
//Popup dialog
function popup(message) {
\t \t
\t // get the screen height and width
\t var maskHeight = $(document).height();
\t var maskWidth = $(window).width();
\t
\t // calculate the values for center alignment
\t var dialogTop = (maskHeight/3) - ($('#dialog-box').height());
\t var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
\t
\t // assign values to the overlay and dialog box
\t $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
\t $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();
\t
\t // display the message
\t $('#dialog-message').html(message);
\t \t \t
}/* Popup window ----------------------------------------*/
#dialog-overlay {
\t /* set it to fill the whil screen */
\t width:100%;
\t height:100%;
\t
\t /* transparency for different browsers */
\t filter:alpha(opacity=50);
\t -moz-opacity:0.5;
\t -khtml-opacity: 0.5;
\t opacity: 0.5;
\t background:#000;
\t /* make sure it appear behind the dialog box but above everything else */
\t position:absolute;
\t top:0; left:0;
\t z-index:3000;
\t /* hide it by default */
\t display:none;
}
#dialog-box {
\t
\t /* css3 drop shadow */
\t -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
\t -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
\t
\t /* css3 border radius */
\t -moz-border-radius: 15px;
-webkit-border-radius: 15px;
\t
\t background:#eee;
\t /* styling of the dialog box, i have a fixed dimension for this demo */
\t width:328px;
\t
\t /* make sure it has the highest z-index */
\t position:absolute;
\t z-index:5000;
\t /* hide it by default */
\t display:none;
}
#dialog-box .dialog-content {
\t /* style the content */
\t text-align:left;
\t padding:10px;
\t margin:13px;
\t color:#666;
}
/* extra styling */
#dialog-box .dialog-content p {
\t font-weight:700; margin:0;
}
#dialog-box .dialog-content ul {
\t margin:10px 0 10px 20px;
\t padding:0;
\t height:50px;
}/* Popup window ----------------------------------------*/
#dialog-overlay {
\t /* set it to fill the whil screen */
\t width:100%;
\t height:100%;
\t
\t /* transparency for different browsers */
\t filter:alpha(opacity=50);
\t -moz-opacity:0.5;
\t -khtml-opacity: 0.5;
\t opacity: 0.5;
\t background:#000;
\t /* make sure it appear behind the dialog box but above everything else */
\t position:absolute;
\t top:0; left:0;
\t z-index:3000;
\t /* hide it by default */
\t display:none;
}
#dialog-box {
\t
\t /* css3 drop shadow */
\t -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
\t -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
\t
\t /* css3 border radius */
\t -moz-border-radius: 15px;
-webkit-border-radius: 15px;
\t
\t background:#eee;
\t /* styling of the dialog box, i have a fixed dimension for this demo */
\t width:328px;
\t
\t /* make sure it has the highest z-index */
\t position:absolute;
\t z-index:5000;
\t /* hide it by default */
\t display:none;
}
#dialog-box .dialog-content {
\t /* style the content */
\t text-align:left;
\t padding:10px;
\t margin:13px;
\t color:#666;
}
/* extra styling */
#dialog-box .dialog-content p {
\t font-weight:700; margin:0;
}
#dialog-box .dialog-content ul {
\t margin:10px 0 10px 20px;
\t padding:0;
\t height:50px;
}<div id="dialog-overlay"></div>
<div id="dialog-box">
\t <div class="dialog-content">
\t \t <div id="dialog-message"></div>
\t \t <a href="#" class="button-small">close</a>
\t </div>
</div>
<a href="#" onclick="return popup('Please Log in');">A click here should launch the popup? Hmm</a>
如果您检查控制台错误，你有一个'未捕获的ReferenceError：弹出是不是defined'错误吧？ –
'popup（）'函数调用缺少参数 –
看看这个：[http://jsfiddle.net/gyeo03nk/2/](http://jsfiddle.net/gyeo03nk/2/） –