Click on JQuery UI dialog button go to bottom of the page

Question

When i click to my dialog button in my page i go down to the bottom of the page, i don't know why. The modal appears in the correct site, but i'm in the bottom of the page and i need to scroll up! The dialog is the JQuery UI dialog: http://jqueryui.com/dialog/ JS code of the click button:

$( "#dialog" ).on( "dialogclose", function( event, ui ) { 
    bluroff();
});
function bluroff() {
   $( ".divBody" ).removeClass( "notouch blur" );
   $( ".divHead" ).removeClass( "notouch blur" );
   $( ".footerrow" ).removeClass( "notouch blur" );
   $( ".divBody" ).addClass( "bluroff" );
   $( ".divHead" ).addClass( "bluroff" );
   $( ".footerrow" ).addClass( "bluroff" );
}

function bluron() {
    $( ".divBody" ).addClass( "notouch blur" );
    $( ".divHead" ).addClass( "notouch blur" );
    $( ".footerrow" ).addClass( "notouch blur" );
    $( ".ui-dialog" ).addClass( "scale" );       
    $( ".divBody" ).removeClass( "bluroff" );
    $( ".divHead" ).removeClass( "bluroff" );
    $( ".footerrow" ).removeClass( "bluroff" );
}
$(".susc").click(function () {
    $( "#dialog" ).dialog();
    bluron();
    });

HTML Code of the button: Suscribirse HTML code of the modal:

<div id="dialog" style="display: none;" title="Task detail">

    <div class="modal-body">
       <div class="row-fluid" style="padding-bottom: 0px;">
<form class="form-horizontal" id="myform" novalidate="">
<div class="control-group">
                            <label class="control-label" for="name">Nombre</label>
                            <div class="controls">
                                <input type="name" class="form-control" data-validation-required-message="Debes escribir tu nombre" name="name" id="name" required="true" aria-invalid="true">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="email">Correo electrónico</label>
                            <div class="controls">
                                <input type="email" class="form-control" data-validation-required-message="No has escrito correctamente el correo electrónico" name="email" id="email" required="" aria-invalid="true">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="emailAgain">Correo electrónico (otra vez)</label>
                            <div class="controls">
                                <input type="email" data-validation-matches-match="email" data-validation-matches-message="Los correos electrónicos no coinciden" class="form-control" data-validation-required-message="Debes escribir el mismo correo electrónico" required="true" id="emailAgain" name="emailAgain" aria-invalid="false">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="terms-and-conditions">Advertencia legal</label>
                            <div class="controls">
                                <label class="checkbox">
                                    <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" required="" data-validation-required-message="Debes estar de acuerdo con los términos y condiciones" aria-invalid="true">
                                    Estoy de acuerdo con los <a id="legal" data-content="CoolFitness se reserva el derecho a usar dicho correo para realizar análisis estadísticos que sin duda te beneficiarán." rel="popover" data-placement="right" data-original-title="Términos y condiciones" data-trigger="hover" href="#">términos y condiciones</a>
                                </label>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Información sobre</label>
                            <div class="controls">
                                <label class="checkbox">
                                    <input type="checkbox" name="qualityControl[]" value="dietas" data-validation-minchecked-minchecked="1" data-validation-minchecked-message="Elige una al menos" aria-invalid="true">
                                    Dietas
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" name="qualityControl[]" value="ej-fitness" aria-invalid="false">
                                    Ejercicios Fitness
                                </label>
                                <label class="checkbox">
                                    <input type="checkbox" name="qualityControl[]" value="encuestas" aria-invalid="false">
                                    Encuestas
                                </label>
                            </div>
                        </div>
                        <div class="modal-footer">
    <button id="btnSave" type="submit"  class="btn btn-success modalbtn">Guardar cambios</button>
    <button id="btnClose" type="button" class="btn btn-default modalbtn cancel" data-dismiss="modal">Cerrar</button>
</div>
<audio>
                <source src="sounds/correct.mp3"></source>
</audio>
             </form>

    </div>
    </div>  </div>

This is my jsfiddle: http://jsfiddle.net/2epBN/ (but i can't get to work in the fiddle).

Answer 1

try this.. fiddle

$(function(){ 
     var navMain = $("#nav-main");

     navMain.on("click", "a", null, function () {
         navMain.collapse('hide');
     });
 });