2012-06-18 44 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不会为此抛出错误。