The postioning at the bottom right corner using jQuery

Question

I tried to position the dialogue box at the bottom right corner of the page, but I was unsuccessful.

What am I doing wrong?

 <script> $(function() { $("#dialog").dialog(); { position: fixed; right: 0; bottom: 0; } }); </script>​ 

Answer 1

Check out my codepen . You can add a position (see the docs ) to a dialog. This is the full jQuery code:

$(function() {
    $( "#dialog" ).dialog({
        position: {
            my: "left top",
            at: "right bottom"
        }
    });
});

Answer 2

You can use jQuery.css() to apply the CSS rules.

 $(function() { // $('#dialog').dialog(); $("#dialog").css({ 'position': 'fixed', 'bottom': 0, 'right': 0 }); }); 

 div { width: 100px; height: 100px; background: url('//placehold.it/100x100'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="dialog"></div> 

---

But there shouldn't be any reason to use jQuery to do this, as it is completely possible with CSS alone.

 div { width: 100px; height: 100px; background: url('//placehold.it/100x100'); position: fixed; bottom: 0; right: 0; } 

 <div id="dialog"></div>