Home/ Questions/Q 8100067
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T22:38:34+00:00

I’m trying to make a draggable popup with Jquery and I’m following the advice

  • 0

I’m trying to make a draggable popup with Jquery and I’m following the advice I got here.
Best way of doing popups / dialogs with JQuery?
But it is not working at all.

The 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');
    });

I’ve attached the action to a button and it activated the alert but no popup is rendering. What is wrong with this?

I’ve reduced it to one page and nothing is working:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You haven’t wrapped your js code inside an onready event.. see 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);
});

    Essentially, what’s happening in your code is $('button') returns an empty set and you’re attaching a handler to an empty set, so you’re not attaching the handler at all.. jQuery doesn’t throw an error for this.

    • 0