关于javascript：jQuery模式创建了好几次

jQuery modal created several times

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
var html =
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle +"</h4>";
html = html + '<iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe>';
html = html +"";

$(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");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.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%;
}

1
2
3
4
5
6

科德森演示

相关讨论

因为每次单击它时，它都会创建一个新的模式框，因此请检查您的模式长度，如果之前没有创建，则创建类似的模式，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
var html =
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle +"</h4>";
html = html + '<iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe>';
html = html +"";
// 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");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1
2
3
4
5
6

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.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%;
}

1
2
3
4
5
6
7
8

相关讨论

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

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

或者可以使用.remove()删除最后一个附加的div。

1
2
3

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

或者你可以使用replaceWith()。

1
2
3
4
5

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

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

您可以使用jquery的.remove()函数(请注意，您的模式需要一个ID才能正确工作)。

如果是追加html，那么每次点击都会增加，所以需要增加整个追加html的parent元素，然后在追加html之前每次点击都删除该parent元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function generateModal(modalTitle, modalWidth, modalHeight, iframeUrl, iframeWidth, iframeHeight) {
var html =
'<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
html = html + '<h4 class="modal-title" id="myModalLabel">' + modalTitle +"</h4>";
html = html + '<iframe src="' + iframeUrl + '" width="' + iframeWidth + '" height="' + iframeHeight + '" allowfullscreen></iframe>';
html = html +"";
$('.modal-parent').remove()
$('.modal-backdrop').fadeOut()
$(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");
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1
2
3
4
5
6