Question

我是新来的。我的PHP代码中的模态有问题。每当我点击它时，它会创建一个模态。首次点击它只显示1模态。但是，当您第二次或更多次单击它时，它会增加并在单击时创建更多模态。即使先前的模态已关闭，它仍会在单击时显示先前的模态。这是Single Modal点击一次后的示例图像。这张照片是切换超过2个模态的样本。 Incrementing Modal

以下是切换模态

的代码

$Query = $this->DBase('Query', array( 0 => "SELECT * FROM `factions`" ));
            while ($FACTIONS = $Query->fetch_object()) {
                $this->FACTION->FACTIONSLIST .= 
                '<tr class="even pointer">
                    <td width="1%" class="a-center "><input type="checkbox" class="flat" name="table_records"></td>
                    <td width="5%">'. $FACTIONS -> id .'</td>
                    <td>'. $FACTIONS -> Name .'</td>
                    <td width="5%" class="last">
                        <a href="#" data-toggle="modal"  data-target=".bs-example-modal-lg" onclick="new ModalCustom({
                            Name: \''. $FACTIONS -> Name .'\',
                        });">
                            &nbsp;<i class="fa fa-pencil"></i>
                        </a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#" onclick="new TabbedNotification({
                              title: \'Notification\',
                              text: \'Faction <b>'. $FACTIONS -> Name .'</b> successfully deleted!, page will be updated shortly.\',
                              type: \'error\',
                              sound: true
                        });">
                              <i class="fa fa-trash-o"></i>
                        </a>
                    </td>
                </tr>';
            }
            break;

这是模态

的javascript

<script>
$(document).ready(function() {
    function appendHtml(el, str) {
        var div = document.createElement('div');
            div.innerHTML = str;
        while (div.children.length > 0) {
            el.appendChild(div.children[0]);
        }
    }

    ModalCustom = function(options) {

        var html = "<div class='modal fade bs-example-modal-lg' tabindex='-1' role='dialog' aria-hidden='true'> <div class='modal-dialog modal-lg'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal'><span aria-hidden='true'>×</span> </button> <h4 class='modal-title' id='myModalLabel'>" + options.Name + "</h4> </div> <div class='modal-body'> <h4></h4> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p> <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> <button type='button' class='btn btn-primary'>Save changes</button> </div> </div> </div> </div>";
        appendHtml(document.body, html);
    };
});
</script>

Answer 1

问题可能在append函数中，你无条件地追加而不检查是否已存在类似的div。将其更改为

        while (div.children.length > 0) {
            $t = $(el).find(".bs-example-modal-lg");
            if($t.length){
                $t.replaceWith(div.children[0]);
            }else{
                $(el).appendChild(div.children[0]);
            }
        }

结帐this question的答案以获取更多信息。

PHP切换模式创建更多模态

1 个答案: