Как удалить опцию стиля?

Question

Существует div, содержащий атрибут style:

<div id="dlg" style="width: auto; height: auto; display: block; left: 151.5px; top: 331.5px;" class="dialog" data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"> 

На $(document).ready я хочу, чтобы удалить параметр top: 331.5px; из атрибута style. Как это сделать ?

UPDATE:

{% include "header.phtml" %} 

    <div data-role="dialog" id="dlg" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"> 
     <div class="container"> 
      <div class="sub-header" id="titre_dlg"></div><br /><hr /> 
      <div id="contenu_dlg"></div> 
     </div> 
    </div> 

    <div id="frmReservTable">{% include "/reservation/frmReservationTable.phtml" %}</div> 

    <div class="header">Liste des r&eacute;servations</div> 

    <span class="helper">Type de r&eacute;servation </span> 
    <label class="input-control radio small-check"> 
     <input type="radio" name="reserv" id="r1" value="T"> 
     <span class="check"></span> 
     <span class="caption">Table</span> 
    </label> 
    <label class="input-control radio small-check"> 
     <input type="radio" name="reserv" id="r2" value="S"> 
     <span class="check"></span> 
     <span class="caption">Salle</span> 
    </label> 
    <br /> 
    <div id="select_salle" class="input-control select"> 
     <select name="salle_code" id="salle_code"> 
      <option value="">--Choisir une salle--</option> 
      <?php 
       $salles = Salle::lireParCritere([]); 
       foreach ($salles as $salle) { 
        ?> 
        <option value="<?php echo $salle->salle_code; ?>"><?php echo $salle->salle_lib; ?></option> 
        <?php 
       } 
      ?> 
     </select> 
    </div> 

    <div id="listTables" class="listview"></div> 

    <div id="listSalles" class="listview"> 
     <?php 
     $ret = ReservationSalle::lireParCritere([]); 
     if ($ret->count() > 0) { 
      $html = ''; 
      foreach ($ret as $key => $val) { 
       $html .= '<div class="list"> 
          <span class="mif-bookmarks list-icon"></span> 
          <span class="list-title">'.$ret[$key]->salle_lib.'</span> 
          <span class="place-right"><button id="btnS_" class="button default">R&eacute;server</button></span> 
          <br/> 
          <span class="sub-title">'.$ret[$key]->reserver.'</span> 
          </div>'; 
      } 
      echo $html; 
     } 
     else { 
      echo '<br/><div class="sub-header">Aucun enregistrement</div>'; 
     } 
     ?> 
    </div> 

    <script type="text/javascript" charset="utf-8"> 

     var table_reserver_id = ""; // pour stocker la table sélectionnée dans la liste 

     function afficherListeTables(salle_code){ 
      if (salle_code == "") 
       $('#listTables').html(""); 
      else { 
       var donne = "salle_code="+salle_code; 
       var ret = $.ajax({ 
         data: donne, 
         type: "POST", 
         url: "RestaurantReservation/ajaxLoadTables", 
         async: false 
        }).responseText; 
       $('#listTables').html(ret); 
      } 
     } 

     function afficherListeReservationTable(table_id, reserver) { 

      if (reserver == 1) { 

       var dialog = $("#dlg").data('dialog'); 

       if (!dialog.element.data('opened')) 
        dialog.open(); // it opens the dialog 

       var donne = "table_code="+table_id; 

       var ret = $.ajax({ 
         data: donne, 
         type: "POST", 
         url: "RestaurantReservation/ajaxGetTableLib", 
         async: false 
        }).responseText; 

       var contenu_dlg = $.ajax({ 
         data: donne, 
         type: "POST", 
         url: "RestaurantReservation/ajaxGenerateListReservationTable", 
         async: false 
        }).responseText; 

       $('#titre_dlg').html("Liste des r&eacute;servations de la table <b>"+ret+"</b>"); 
       $('#contenu_dlg').html(contenu_dlg); 
      } 
     } 

     function afficherListeReservationSalle(salle_id, reserver) { 
      if (reserver == "oui") { 
       window.location = "RestaurantReservation/listerReservationSalle/"+salle_id; 
      } 
     } 

     $(document).ready(function() { 

       $('#dlg').css("top", ""); 

      $("#frmReservTable").hide(); // formulaire de réservation de table 

      $("#r1").attr("checked","true"); 
      $("#listSalles").hide(); 

      $("input:radio").on("change", function(){ 
       if($(this).val() == "S") { 
        $("#select_salle").hide(); 
        $("#listTables").hide(); 
        $("#listSalles").show(); 
       } 
       else { 
        $("#listSalles").hide(); 
        $("#select_salle").show(); 
        $("#listTables").show(); 
       } 
      }); 

      $("#salle_code").on("change", function(){ // sélection de salle si type_reservation = Table 
       afficherListeTables($(this).val()); 
      }); 

      $("#listTables").on("click","div[id^='table_']", function(){ // click d'une ligne de table 
       var _id = $(this).attr("id"); // de la forme "table_3_1" 
       var idx_last__ = _id.lastIndexOf("_"); 
       var table_id = _id.substring(_id.indexOf("_")+1, idx_last__); 
       table_reserver_id = table_id; 
       var flag_reserver = _id.substr(idx_last__ + 1); 
       afficherListeReservationTable(table_id, flag_reserver); 
      }); 

      $("#listTables").on("click","button[id^='reservT_']", function(e){ // click du bouton "Réserver" pour une table 
       var _id = $(this).attr("id"); // de la forme "reservT_1" 
       var idx__ = _id.indexOf("_"); 
       var table_id = _id.substr(idx__ + 1); 
       var donne = "table_code="+table_id; 
       var ret = $.ajax({ 
         data: donne, 
         type: "POST", 
         url: "RestaurantReservation/ajaxGetTableLib", 
         async: false 
        }).responseText; 
       var dialog = $("#dlg").data('dialog'); 
       if (!dialog.element.data('opened')) 
        dialog.open(); 
       $('#titre_dlg').html("Ajout de r&eacute;servation pour la table <b>"+ret+"</b>"); 
       $('#contenu_dlg').html($("#frmReservTable").html()); 
       e.stopPropagation(); // empécher l'événement "clic" sur "div[id^='table_']" de se déclencher 
      }); 

      $("#contenu_dlg").on("click", "button[id^='undoReservT_']", function(e) { // click du bouton "Annuler" pour une réservation de table 
       var _id = $(this).attr("id"); // de la forme "undoReservT_1" 
       var idx__ = _id.indexOf("_"); 
       var reserv_id = _id.substr(idx__ + 1); 
       var donne = "ID_RESERVATION="+reserv_id; 
       $.ajax({ 
         data: donne, 
         type: "POST", 
         url: "RestaurantReservation/ajaxSupprimerReservationTable", 
         async: false, 
         success: function (data, status, xhr) { 
            afficherListeTables($("#salle_code").val()); // rafraichir la liste des tables avec leur statut de réservation associé 
            afficherListeReservationTable(table_reserver_id, 1); // rafraichir la liste des réservations de la table sélectionnée 
           } 
         }); 
       e.stopPropagation(); 
      }); 

     }); 

    </script> 
{% include "footer.phtml" %} 

Страница frmReservationTable.phtml:

<div class="tile-area no-padding"> 
    <div class="tile-container "> 
     <div class="tile-large " data-role="tile"> 
      <form id="formReservTable" method="POST"> 
       <input type="hidden" name="TABLE_CODE" id="TABLE_CODE" /> 
       <div class="input-control select"> 
        <select name="CLT_ID" id="CLT_ID"> 
         <option value=""> -- S&eacute;lectionner un client -- </option> 
         <?php 
          $clients = Client::lireParCritere([]); 
          foreach ($clients as $client) { 
           ?> 
           <option value="<?php echo $client->clt_id; ?>"><?php echo $client->noms; ?></option> 
           <?php 
          } 
         ?> 
        </select> 
       </div> 
       <button class="button default" id="btn_reserv">Valider</button> 
       <span id="retour_table"><?php echo $this->tag->linkTo(array('ReferentielClient', 'Annuler', 'class' => 'button default')); ?></span> 
       <span id="retour_salle"><?php echo $this->tag->linkTo(array('ReferentielSalle', 'Annuler', 'class' => 'button default')); ?></span> 
      </form> 
     </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     if ($("input:radio:checked").val() == "T") { 
      $("#retour_salle").hide(); 
      $("#retour_table").show(); 
     } 
     else { 
      $("#retour_salle").show(); 
      $("#retour_table").hide(); 
     } 

     $("#TABLE_CODE").val(table_reserver_id); 

     $("#formReservTable").on("submit", function(e){ 
      alert("table code = "+$("#TABLE_CODE").val()); 
      e.preventDefault(); 
     }); 

    }); 
</script> 

Во время выполнения диалог находится в нижней части экрана:

Answer 1

Изменение только top значение при видимом диалоговом окне

Вы можете сделать это с помощью

//document ready handler 

$(function() { 
     --- 
     --- 
    dialog.open(); 

    $('#dlg').css('top', 'auto'); // do this when your dialog is visible 
}); 

Answer 2

значения по умолчанию для Верх CSS CSS (и слева) является авто. Вы можете установить его на авто в событии дома:

$(function(){ 
    $('#dlg').css('top', 'auto'); 
}); 

Однако это больше похоже на взлом. он не удаляет значение, а перезаписывает его. правильный путь для достижения этой цели было бы установить его:

$('#dlg').css('top', ''); 

Answer 3

Значения по умолчанию для CSS top является auto, поэтому вы можете установить это как свое значение. Примерно так: $('#dlg').css('top', 'auto').