簡單的jQuery模態窗口在頁面加載時不顯示彈出窗口

我正在使用jQuery模態窗口之一，如this tutorial所示。簡單的jQuery模態窗口在頁面加載時不顯示彈出窗口

它與基本示例正常工作，但是當我做出更改以顯示頁面加載的模式窗口時，它不起作用，它甚至阻止鏈接<a href="#dialog" name="modal">Simple Modal Window</a>顯示彈出窗口模式，如果點擊。

我有例如在jsFiddle

我不知道我做錯了。

我只是想簡單的模態窗口顯示在頁面加載事件。

launchWindow('#dialog'); // does not work as shown in that tutorial

來源

2012-12-27 Learning

你嘗試過它的作品在頁面加載檢查控制檯中的錯誤？ – KyelJmD

是否使用document.ready函數，因爲只有在元素準備就緒時才需要調用它 – Raghurocks

嘗試放置一些代碼會更容易幫助 – Raghurocks

試試這個：http://jsfiddle.net/HJUZm/

你有對<a>的點擊剛纔刪除了。

$(document).ready(function() { 
    var id = $(this).attr('href'); 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set height and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    $('#mask').fadeIn(1000); 
    $('#mask').fadeTo("slow",0.8); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    $(id).css('top', winH/2-$(id).height()/2); 
    $(id).css('left', winW/2-$(id).width()/2); 

    //transition effect 
    $(id).fadeIn(2000); 


//if close button is clicked 
$('.window .close').click(function (e) { 
    //Cancel the link behavior 
    e.preventDefault(); 
    $('#mask, .window').hide(); 
});  

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
});   

$(window).resize(function() { 

    var box = $('#boxes .window'); 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set height and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 

    //Set the popup window to center 
    box.css('top', winH/2 - box.height()/2); 
    box.css('left', winW/2 - box.width()/2); 

});  
});

來源

2012-12-27 07:04:07 Jai

這就是我告訴海報的內容，只有當他點擊標籤時，模式纔會起作用。 – KyelJmD

謝謝，我沒有看到那一個。我會在一瞬間標記你的答案。 – Learning

@jai，你能具體說明你在哪裏做了改變.. – Learning

launchWindow（..）沒有在你的JavaScript來定義。

改爲試試這個：
$（'a [name = modal]'）。click（）;

來源

2012-12-27 07:06:07

用戶的目標是在頁面加載時顯示模式，而不是通過點擊錨標籤。 – KyelJmD

是的，上面的代碼間接調用鏈接的點擊事件。這是如果他希望onLoad和鏈接可用來顯示彈出 –

在您的代碼中，它缺少功能launchWindow()。這是函數：

function launchWindow(id) { 
     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 
}

來源

2012-12-27 07:14:39 CoursesWeb

看看這個爲u描述 Fiddle

Here simply I have removed  `$('a[name=modal]').click(function(e) {` });

，並設置var id = $('#link').attr('href');其中鏈路ID標籤的ID

來源

2012-12-27 07:15:08

簡單的jQuery模態窗口在頁面加載時不顯示彈出窗口

回答

相關問題