1

I have Open Modal button and when you click button, my modal has been creating with jquery, everything is okey so far but I guess my method is wrong because I noticed a bug is after open the modal if you close and if you open again you will see it has been creating 2 times,3 times,4 times....

so where is my mistake ? and another question is how can I send my parameters default value ?

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

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
ani_css
  • 2,118
  • 3
  • 30
  • 73
  • 1
    You never remove `.mapModal` when closing it i guess. – Arg0n Jun 02 '17 at 09:05
  • oooh I'm trying now thank you! – ani_css Jun 02 '17 at 09:05
  • $(document.body).append(html); here you are append html into body tag while closing a model you did't delete the html tag properly then again your trying to open a new Model $(document.body).append(html); again it will happen here so twice its opening – Kalaiselvan Jun 02 '17 at 09:07
  • @Arg0n you are correct he did't remove .mapModal while closing a model thats why two,threee models show – Kalaiselvan Jun 02 '17 at 09:09

4 Answers4

3

Because every time it is clicked it creates a new modal box so check your modal length and create if it is not created before like, 

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>

For the default values you can check parameters in your function like,

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>
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
  • it's great example thank you so much so I searched before you write and I see this code for default parameters `function name(arg=false,arg2="string",arg3=12){}` are they same thing? – ani_css Jun 02 '17 at 09:28
  • 1
    Yes you can, also you can look for the answers given on https://stackoverflow.com/questions/6486307/default-argument-values-in-javascript-functions – Rohan Kumar Jun 02 '17 at 09:31
2

You generate a new modal each time you click the button. If you could add a handler that gets executed once the modal is closed again, then you can fix it by simply removing the element.

You could use jQuery's .remove()-function (notice that your modal needs an ID for that to work correctly).

StuntHacks
  • 457
  • 3
  • 15
2

Instead of append you can use .html().

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

Or you can remove last appended div using .remove()

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

or you can use replaceWith()

if($('.mapModal').length) {
    $( ".mapModal" ).replaceWith(html);
} else {
    $(document.body).append(html);
}
Super User
  • 9,448
  • 3
  • 31
  • 47
1

In you case you append the html .so it increased each time of click .so You need add with parent element for whole append html .Then remove that parent element each time of click before the append html

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");
});
.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>
prasanth
  • 22,145
  • 4
  • 29
  • 53