我是新来的。我的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 .'\',
});">
<i class="fa fa-pencil"></i>
</a>
<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>
答案 0 :(得分:0)
问题可能在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的答案以获取更多信息。