jQuery模式创建了好几次

时间：2017-06-02 09:01:47

标签： javascript jquery html css twitter-bootstrap

我有打开模态按钮，当你点击按钮时，我的模态已经用jquery创建，到目前为止一切都很好但是我想我的方法是错误的，因为我注意到一个错误是在打开之后模态，如果你关闭，如果你再次打开，你会看到它已经创建了2次，3次，4次....

那我的错误在哪里？另一个问题是如何发送我的参数默认值？

function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
  var html =
    '<div class="modal fade mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body"><iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe></div>';
  html = html + "</div></div></div>";

  $(document.body).append(html);
  $(".mapModal").modal();
}


$(document).on("click", ".open-modal", function() {
  generateModal("Modal deneme ", "60%", "500px", "https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12047.436573933934!2d29.098413750000002!3d40.984565100000005!3m2!1i1024!2i768!4f13.1!5e0!3m2!1str!2str!4v1463140023736", "100%", "auto");
});
.open-modal {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-modal:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

.modal-dialog iframe {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-modal" data-toggle="modal" data-target=".mapModal" aria-expanded="false">Open Modal</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Codepen Demo

4 个答案:

答案 0 :(得分：3)

因为每次点击它都会创建一个新的模态框，所以检查你的模态长度并创建它是否在之前没有创建，

function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
  var html =
    '<div class="modal fade mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body"><iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe></div>';
  html = html + "</div></div></div>";
  // check length and append if it is not added before
  !$(".mapModal").length && $(document.body).append(html);
  $(".mapModal").modal();
}


$(document).on("click", ".open-modal", function() {
  generateModal("Modal deneme ", "60%", "500px", "https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12047.436573933934!2d29.098413750000002!3d40.984565100000005!3m2!1i1024!2i768!4f13.1!5e0!3m2!1str!2str!4v1463140023736", "100%", "auto");
});
.open-modal {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-modal:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

.modal-dialog iframe {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-modal" data-toggle="modal" data-target=".mapModal" aria-expanded="false">Open Modal</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

对于默认值，您可以检查函数中的参数，如

function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
  modalTitle = modalTitle || 'Default Modal Name';
  modalWidth = modalWidth || '80%';
  modalHeight = modalHeight || '500px';
  iframeUrl = iframeUrl || 'https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12047.436573933934!2d29.098413750000002!3d40.984565100000005!3m2!1i1024!2i768!4f13.1!5e0!3m2!1str!2str!4v1463140023736'
  iframeWidth = iframeWidth || '100%';
  iframeHeight = iframeHeight || '100%';
  
  var html =
    '<div class="modal fade mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body"><iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe></div>';
  html = html + "</div></div></div>";
  $(document.body).append(html);
  $(".mapModal").modal().on('hidden.bs.modal',function(){
    $(this).remove();
  });
}


$(document).on("click", ".open-modal", function() {
  generateModal("Modal deneme ", "60%", "500px", "https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12047.436573933934!2d29.098413750000002!3d40.984565100000005!3m2!1i1024!2i768!4f13.1!5e0!3m2!1str!2str!4v1463140023736", "100%", "auto");
});
$(document).on("click", ".open-modal-default", function() {
  generateModal();
});
.open-modal,.open-modal-default {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-modal:hover,.open-modal-default:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

.modal-dialog iframe {
  width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-modal" data-toggle="modal" data-target=".mapModal" aria-expanded="false">Open Modal</p>
<p class="open-modal-default" data-toggle="modal" data-target=".mapModal" aria-expanded="false">Open Modal Default</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

答案 1 :(得分：2)

每次单击按钮时都会生成一个新模态。如果你可以添加一个在再次关闭模态后执行的处理程序，那么你可以通过简单地删除元素来修复它。

你可以使用jQuery的.remove() - 函数（注意你的模态需要一个ID才能正常工作）。

答案 2 :(得分：2)

您可以使用append而不是.html()。

$('<modal selector>').html(html);
$(".mapModal").modal();

或者您可以使用.remove()

删除最后添加的div 
$('body .mapModal').remove();
$(document.body).append(html);
$(".mapModal").modal();

或者您可以使用replaceWith() 

if($('.mapModal').length) {
    $( ".mapModal" ).replaceWith(html);
} else {
    $(document.body).append(html);
}

答案 3 :(得分：1)

在你的情况下，你追加html。所以每次点击都会增加。所以你需要为整个追加parent添加html元素。然后删除parent }每次点击附加html之前的元素

＆＃13;
＆＃13; 
function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
  var html =
    '<div class="modal fade mapModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="width:' + modalWidth + ';height:' + modalHeight + '"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>';
  html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle + "</h4></div>";
  html = html + '<div class="modal-body"><iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe></div>';
  html = html + "</div></div></div>";
$('.modal-parent').remove()
$('.modal-backdrop').fadeOut()
  $(document.body).append('<div class="modal-parent">'+html+'</div>');
  $(".mapModal").modal();
}


$(document).on("click", ".open-modal", function() {
  generateModal("Modal deneme ", "60%", "500px", "https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d12047.436573933934!2d29.098413750000002!3d40.984565100000005!3m2!1i1024!2i768!4f13.1!5e0!3m2!1str!2str!4v1463140023736", "100%", "auto");
});
＆＃13; 
.open-modal {
  border: 3px solid #ccc;
  display: inline-block;
  padding: 12px;
  font-size: 14px;
  margin: 100px;
  cursor: pointer;
  box-shadow: 0px 0px 10px #ccc;
}

.open-modal:hover {
  background: #050505;
  color: #fff;
  border-color: #000;
}

.modal-dialog iframe {
  width: 100%;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<p class="open-modal" data-toggle="modal" data-target=".mapModal" aria-expanded="false">Open Modal</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题