javascript - 多次创建 jQuery 模态

Question

我有打开模式按钮，当你点击按钮时，我的模式一直在用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

Answer 1

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

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>