Mixing
$('#myModal').modal('show'); freezes screen
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
2
When I try to open a modal using $('#myModal').modal('show');, it does not open and my screen freezes.
At the end of my body tag, I have a modal:
<div class="portfolio-modal mfp-hide" id="myModal">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<hr class="star-dark mb-5">
</div>
</div>
</div>
</div>
</div>
And at the beginning of my body tag, I have a script. In this script, I'm trying to show a modal when a google maps marker is clicked. However, when it is clicked, my website crashes with a dim-black screen and no modal shows.
window.google.maps.event.addListener(marker, 'click', function () {
// $("#myModal").removeClass("in");
//$("#myModa").remove();
//$('body').removeClass('modal-open');
// $('body').css('padding-right', '');
// $('#myModal').modal('show');
// $('.myModal').modal('show');
$('#myModal').modal('show');
});
Interestingly, my modal shows perfectly fine when accessing via href here:
<div class="col-md-3">
<a class="portfolio-item d-block mx-auto" href="#myModal">
<div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
</div>
</a>
</div>
This has to be some type of bug within the Bootstrap Freelancer template. I've read other posts saying that others fixed a similar issue by editing .css files.
Here is my bootstrap.css code
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%);
}
@media screen and (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (0.5rem * 2));
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - (0.5rem * 2));
content: "";
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #e9ecef;
}
.modal-footer > :not(:first-child) {
margin-left: .25rem;
}
.modal-footer > :not(:last-child) {
margin-right: .25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-centered {
min-height: calc(100% - (1.75rem * 2));
}
.modal-dialog-centered::before {
height: calc(100vh - (1.75rem * 2));
}
.modal-sm {
max-width: 300px;
}
javascript twitter-bootstrap bootstrap-modal
asked Jan 3 at 12:28
grantespograntespo
7231836
|
show 8 more comments
2
When I try to open a modal using $('#myModal').modal('show');, it does not open and my screen freezes.
At the end of my body tag, I have a modal:
<div class="portfolio-modal mfp-hide" id="myModal">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<hr class="star-dark mb-5">
</div>
</div>
</div>
</div>
</div>
And at the beginning of my body tag, I have a script. In this script, I'm trying to show a modal when a google maps marker is clicked. However, when it is clicked, my website crashes with a dim-black screen and no modal shows.
window.google.maps.event.addListener(marker, 'click', function () {
// $("#myModal").removeClass("in");
//$("#myModa").remove();
//$('body').removeClass('modal-open');
// $('body').css('padding-right', '');
// $('#myModal').modal('show');
// $('.myModal').modal('show');
$('#myModal').modal('show');
});
Interestingly, my modal shows perfectly fine when accessing via href here:
<div class="col-md-3">
<a class="portfolio-item d-block mx-auto" href="#myModal">
<div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
</div>
</a>
</div>
This has to be some type of bug within the Bootstrap Freelancer template. I've read other posts saying that others fixed a similar issue by editing .css files.
Here is my bootstrap.css code
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%);
}
@media screen and (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (0.5rem * 2));
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - (0.5rem * 2));
content: "";
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #e9ecef;
}
.modal-footer > :not(:first-child) {
margin-left: .25rem;
}
.modal-footer > :not(:last-child) {
margin-right: .25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-centered {
min-height: calc(100% - (1.75rem * 2));
}
.modal-dialog-centered::before {
height: calc(100vh - (1.75rem * 2));
}
.modal-sm {
max-width: 300px;
}
javascript twitter-bootstrap bootstrap-modal
asked Jan 3 at 12:28
grantespograntespo
7231836
try to increase your z-index
– user6656728
Jan 3 at 12:29
I think that "my website crashes" is a very incorrect description of what is happening. What does it even mean, e.g. does the Web Server process get killed? (probably not...)
– Peter B
Jan 3 at 12:31
@MumbaiWadala it's at 1050, what should it go to?
– grantespo
Jan 3 at 12:32
hmm, can you post the screenshot of the page when it crashes? not sure if it has to do at all with some web dev issue, probably memory or gpu?
– niklaz
Jan 3 at 12:33
@PeterB ok, crash is incorrect, my screen freezes and modal does not open. Therefore have to refresh.
– grantespo
Jan 3 at 12:33
|
show 8 more comments
2
2
2
When I try to open a modal using $('#myModal').modal('show');, it does not open and my screen freezes.
At the end of my body tag, I have a modal:
<div class="portfolio-modal mfp-hide" id="myModal">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<hr class="star-dark mb-5">
</div>
</div>
</div>
</div>
</div>
And at the beginning of my body tag, I have a script. In this script, I'm trying to show a modal when a google maps marker is clicked. However, when it is clicked, my website crashes with a dim-black screen and no modal shows.
window.google.maps.event.addListener(marker, 'click', function () {
// $("#myModal").removeClass("in");
//$("#myModa").remove();
//$('body').removeClass('modal-open');
// $('body').css('padding-right', '');
// $('#myModal').modal('show');
// $('.myModal').modal('show');
$('#myModal').modal('show');
});
Interestingly, my modal shows perfectly fine when accessing via href here:
<div class="col-md-3">
<a class="portfolio-item d-block mx-auto" href="#myModal">
<div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
</div>
</a>
</div>
This has to be some type of bug within the Bootstrap Freelancer template. I've read other posts saying that others fixed a similar issue by editing .css files.
Here is my bootstrap.css code
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%);
}
@media screen and (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (0.5rem * 2));
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - (0.5rem * 2));
content: "";
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #e9ecef;
}
.modal-footer > :not(:first-child) {
margin-left: .25rem;
}
.modal-footer > :not(:last-child) {
margin-right: .25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-centered {
min-height: calc(100% - (1.75rem * 2));
}
.modal-dialog-centered::before {
height: calc(100vh - (1.75rem * 2));
}
.modal-sm {
max-width: 300px;
}
javascript twitter-bootstrap bootstrap-modal
asked Jan 3 at 12:28
grantespograntespo
7231836
When I try to open a modal using $('#myModal').modal('show');, it does not open and my screen freezes.
At the end of my body tag, I have a modal:
<div class="portfolio-modal mfp-hide" id="myModal">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<hr class="star-dark mb-5">
</div>
</div>
</div>
</div>
</div>
And at the beginning of my body tag, I have a script. In this script, I'm trying to show a modal when a google maps marker is clicked. However, when it is clicked, my website crashes with a dim-black screen and no modal shows.
window.google.maps.event.addListener(marker, 'click', function () {
// $("#myModal").removeClass("in");
//$("#myModa").remove();
//$('body').removeClass('modal-open');
// $('body').css('padding-right', '');
// $('#myModal').modal('show');
// $('.myModal').modal('show');
$('#myModal').modal('show');
});
Interestingly, my modal shows perfectly fine when accessing via href here:
<div class="col-md-3">
<a class="portfolio-item d-block mx-auto" href="#myModal">
<div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
</div>
</a>
</div>
This has to be some type of bug within the Bootstrap Freelancer template. I've read other posts saying that others fixed a similar issue by editing .css files.
Here is my bootstrap.css code
.modal-open {
overflow: hidden;
}
.modal-open .modal {
overflow-x: hidden;
overflow-y: auto;
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 0.5rem;
pointer-events: none;
}
.modal.fade .modal-dialog {
transition: -webkit-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
-webkit-transform: translate(0, -25%);
transform: translate(0, -25%);
}
@media screen and (prefers-reduced-motion: reduce) {
.modal.fade .modal-dialog {
transition: none;
}
}
.modal.show .modal-dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.modal-dialog-centered {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
min-height: calc(100% - (0.5rem * 2));
}
.modal-dialog-centered::before {
display: block;
height: calc(100vh - (0.5rem * 2));
content: "";
}
.modal-content {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0.5;
}
.modal-header {
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #e9ecef;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.modal-header .close {
padding: 1rem;
margin: -1rem -1rem -1rem auto;
}
.modal-title {
margin-bottom: 0;
line-height: 1.5;
}
.modal-body {
position: relative;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 1rem;
}
.modal-footer {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
padding: 1rem;
border-top: 1px solid #e9ecef;
}
.modal-footer > :not(:first-child) {
margin-left: .25rem;
}
.modal-footer > :not(:last-child) {
margin-right: .25rem;
}
.modal-scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 1.75rem auto;
}
.modal-dialog-centered {
min-height: calc(100% - (1.75rem * 2));
}
.modal-dialog-centered::before {
height: calc(100vh - (1.75rem * 2));
}
.modal-sm {
max-width: 300px;
}
javascript twitter-bootstrap bootstrap-modal
javascript twitter-bootstrap bootstrap-modal
asked Jan 3 at 12:28
grantespograntespo
7231836
asked Jan 3 at 12:28
grantespograntespo
7231836
edited Jan 3 at 12:32
grantespo
asked Jan 3 at 12:28
grantespograntespo
7231836
asked Jan 3 at 12:28
grantespograntespo
7231836
asked Jan 3 at 12:28
grantespograntespo
7231836
7231836
try to increase your z-index
– user6656728
Jan 3 at 12:29
I think that "my website crashes" is a very incorrect description of what is happening. What does it even mean, e.g. does the Web Server process get killed? (probably not...)
– Peter B
Jan 3 at 12:31
@MumbaiWadala it's at 1050, what should it go to?
– grantespo
Jan 3 at 12:32
hmm, can you post the screenshot of the page when it crashes? not sure if it has to do at all with some web dev issue, probably memory or gpu?
– niklaz
Jan 3 at 12:33
@PeterB ok, crash is incorrect, my screen freezes and modal does not open. Therefore have to refresh.
– grantespo
Jan 3 at 12:33
|
show 8 more comments
try to increase your z-index
– user6656728
Jan 3 at 12:29
I think that "my website crashes" is a very incorrect description of what is happening. What does it even mean, e.g. does the Web Server process get killed? (probably not...)
– Peter B
Jan 3 at 12:31
@MumbaiWadala it's at 1050, what should it go to?
– grantespo
Jan 3 at 12:32
hmm, can you post the screenshot of the page when it crashes? not sure if it has to do at all with some web dev issue, probably memory or gpu?
– niklaz
Jan 3 at 12:33
@PeterB ok, crash is incorrect, my screen freezes and modal does not open. Therefore have to refresh.
– grantespo
Jan 3 at 12:33
try to increase your z-index
– user6656728
Jan 3 at 12:29
try to increase your z-index
– user6656728
Jan 3 at 12:29
I think that "my website crashes" is a very incorrect description of what is happening. What does it even mean, e.g. does the Web Server process get killed? (probably not...)
– Peter B
Jan 3 at 12:31
I think that "my website crashes" is a very incorrect description of what is happening. What does it even mean, e.g. does the Web Server process get killed? (probably not...)
– Peter B
Jan 3 at 12:31
@MumbaiWadala it's at 1050, what should it go to?
– grantespo
Jan 3 at 12:32
@MumbaiWadala it's at 1050, what should it go to?
– grantespo
Jan 3 at 12:32
hmm, can you post the screenshot of the page when it crashes? not sure if it has to do at all with some web dev issue, probably memory or gpu?
– niklaz
Jan 3 at 12:33
hmm, can you post the screenshot of the page when it crashes? not sure if it has to do at all with some web dev issue, probably memory or gpu?
– niklaz
Jan 3 at 12:33
@PeterB ok, crash is incorrect, my screen freezes and modal does not open. Therefore have to refresh.
– grantespo
Jan 3 at 12:33
@PeterB ok, crash is incorrect, my screen freezes and modal does not open. Therefore have to refresh.
– grantespo
Jan 3 at 12:33
|
show 8 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022308%2fmymodal-modalshow-freezes-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022308%2fmymodal-modalshow-freezes-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
try to increase your z-index
– user6656728
Jan 3 at 12:29
I think that "my website crashes" is a very incorrect description of what is happening. What does it even mean, e.g. does the Web Server process get killed? (probably not...)
– Peter B
Jan 3 at 12:31
@MumbaiWadala it's at 1050, what should it go to?
– grantespo
Jan 3 at 12:32
hmm, can you post the screenshot of the page when it crashes? not sure if it has to do at all with some web dev issue, probably memory or gpu?
– niklaz
Jan 3 at 12:33
@PeterB ok, crash is incorrect, my screen freezes and modal does not open. Therefore have to refresh.
– grantespo
Jan 3 at 12:33