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。怎么做？

更新：

{% 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

CSS top（和left）的默认值为auto。您可以在dom ready事件中将其设置为auto：

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

然而，这更像是一个黑客。它不是删除值而是覆盖它。实现这一目标的正确方法是将其设置为：

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

Answer 2

仅在对话框可见时更改top值

您可以使用

执行此操作

//document ready handler

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

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

Answer 3

CSS top的默认值为auto，因此您可以将其设置为您的值。像这样：$('#dlg').css('top', 'auto')。

如何删除样式选项？

3 个答案: