2012-06-18 48 views
0

我試圖做一個可拖動的彈出窗口與Jquery,我遵循我得到的建議。 Best way of doing popups/dialogs with JQuery? 但它根本不起作用。JQuery彈出窗口不是呈現

的HTML

<body id="content" onload="if(document.getElementById('beroende') != null) { ingVar(document.getElementById('beroende').value); }"> 
<div class='newpopup'></div> 

CSS

.newpopup 
{ 
    display:none; 
    position:absolute; 
} 

的Javascript

function popup(){ 
    // for the draggable you may want to specify the drag handle like only the title of the popup 
    alert('i popup'); 
    var popup = $('.newpopup'); 

    popup.draggable(); 
    popup.resizable(); 

    $.get('/PandoraArendeWeb/arendeprocess_grunduppgifter.jsp', function(data) {   
     popup.html(data); 
     popup.show('fast'); 
    }); 

我已經附加了動作按鈕,它激活了警報,但沒有彈出窗口渲染。這有什麼問題?

我它減少到一個頁面,並沒有什麼工作:

<html> 
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css"> 
    <script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script> 
    <script language="JavaScript1.2" type="text/javascript"> 
function popup() { 
    var popup = $('.newpopup'); 
    popup.draggable(); 
    popup.resizable(); 
    popup.html('<p>Where is pancakes house?</p>'); 
    popup.show('fast'); 
} 
$('button').click(popup); 
    </script> 
</head> 
<body> 
<div class='newpopup'></div> 
<button>popup</button> 
</body> 
</html> 
+1

嘗試設置'z-index:9999;'在你的css中.newpopup – nbrooks

+0

我已經把它全部放在一個頁面上,它不工作。沒有任何工作。我用應該工作的代碼更新了問題。 –

回答

1

您還沒有包裹的onready事件中你的js代碼..看到http://api.jquery.com/ready/

jQuery(function($){ 

    function popup() { 
     var popup = $('.newpopup'); 
     popup.draggable(); 
     popup.resizable(); 
     popup.html('<p>Where is pancakes house?</p>'); 
     popup.show('fast'); 
    } 
    $('button').click(popup); 
}); 

從本質上講,什麼是在你的代碼中發生的是$('button')返回一個空集,你將一個處理程序附加到一個空集,所以你根本不附加處理程序.. jQuery不會爲此拋出錯誤。