Twitter Bootstrap Question posted in

jQuery modal created several times – Twitter bootstrap

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

Tags:

4

Answers


  1. 0

    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).

    Login or Signup to reply.
  2. 0

    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);
}
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search