Bootstrap: $('#myModal').modal('show'); causes screen to go black





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







1















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 jquery twitter-bootstrap bootstrap-modal







share|improve this question

























  • post your css code

    – the_ultimate_developer
    Jan 3 at 10:41











  • @priyanshisrivastava i just posted it.

    – grantespo
    Jan 3 at 10:50


















1















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 jquery twitter-bootstrap bootstrap-modal







share|improve this question

























  • post your css code

    – the_ultimate_developer
    Jan 3 at 10:41











  • @priyanshisrivastava i just posted it.

    – grantespo
    Jan 3 at 10:50














1












1








1








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 jquery twitter-bootstrap bootstrap-modal







share|improve this question
















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 jquery twitter-bootstrap bootstrap-modal




javascript jquery twitter-bootstrap bootstrap-modal






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 10:49







grantespo

















asked Jan 3 at 10:35









grantespograntespo

7231836




7231836













  • post your css code

    – the_ultimate_developer
    Jan 3 at 10:41











  • @priyanshisrivastava i just posted it.

    – grantespo
    Jan 3 at 10:50



















  • post your css code

    – the_ultimate_developer
    Jan 3 at 10:41











  • @priyanshisrivastava i just posted it.

    – grantespo
    Jan 3 at 10:50

















post your css code

– the_ultimate_developer
Jan 3 at 10:41





post your css code

– the_ultimate_developer
Jan 3 at 10:41













@priyanshisrivastava i just posted it.

– grantespo
Jan 3 at 10:50





@priyanshisrivastava i just posted it.

– grantespo
Jan 3 at 10:50












1 Answer
1






active

oldest

votes


















2














Try this..backdrop was main issue..so i removed it






// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>








share|improve this answer
























  • thanks, haven't solved yet. What exactly did you change in the .css code?

    – grantespo
    Jan 3 at 11:25











  • $(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

    – the_ultimate_developer
    Jan 3 at 11:27











  • When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

    – grantespo
    Jan 3 at 11:28











  • marker as in class="fa fa-3x fa-times" ??

    – the_ultimate_developer
    Jan 3 at 11:31











  • haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

    – grantespo
    Jan 3 at 11:33












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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54020568%2fbootstrap-mymodal-modalshow-causes-screen-to-go-black%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














Try this..backdrop was main issue..so i removed it






// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>








share|improve this answer
























  • thanks, haven't solved yet. What exactly did you change in the .css code?

    – grantespo
    Jan 3 at 11:25











  • $(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

    – the_ultimate_developer
    Jan 3 at 11:27











  • When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

    – grantespo
    Jan 3 at 11:28











  • marker as in class="fa fa-3x fa-times" ??

    – the_ultimate_developer
    Jan 3 at 11:31











  • haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

    – grantespo
    Jan 3 at 11:33
















2














Try this..backdrop was main issue..so i removed it






// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>








share|improve this answer
























  • thanks, haven't solved yet. What exactly did you change in the .css code?

    – grantespo
    Jan 3 at 11:25











  • $(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

    – the_ultimate_developer
    Jan 3 at 11:27











  • When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

    – grantespo
    Jan 3 at 11:28











  • marker as in class="fa fa-3x fa-times" ??

    – the_ultimate_developer
    Jan 3 at 11:31











  • haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

    – grantespo
    Jan 3 at 11:33














2












2








2







Try this..backdrop was main issue..so i removed it






// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>








share|improve this answer













Try this..backdrop was main issue..so i removed it






// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>








// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>





// $("#myModal").removeClass("in");

               //$("#myModa").remove();

               //$('body').removeClass('modal-open');

               // $('body').css('padding-right', '');

               // $('#myModal').modal('show');

               // $('.myModal').modal('show');



               $('#myModal').modal('show');

               $(".modal-backdrop").remove();

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

     }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="portfolio-modal mfp-hide modal fade" id="myModal" role="dialog">

<div class="modal-dialog">

  <div class="portfolio-modal-dialog bg-white">

   <div class="modal-header">

    <a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">

      <i class="fa fa-3x fa-times"></i>

    </a>

    </div>

     <div class="modal-body">

    <div class="container text-center">

      <div class="row">

        <div class="col-lg-8 mx-auto">

        helloooo

          <hr class="star-dark mb-5">

        </div>

      </div>

      </div>

    </div>

    </div>

  </div>

</div>






share|improve this answer












share|improve this answer



share|improve this answer










answered Jan 3 at 11:11









the_ultimate_developerthe_ultimate_developer

1,045823




1,045823













  • thanks, haven't solved yet. What exactly did you change in the .css code?

    – grantespo
    Jan 3 at 11:25











  • $(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

    – the_ultimate_developer
    Jan 3 at 11:27











  • When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

    – grantespo
    Jan 3 at 11:28











  • marker as in class="fa fa-3x fa-times" ??

    – the_ultimate_developer
    Jan 3 at 11:31











  • haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

    – grantespo
    Jan 3 at 11:33



















  • thanks, haven't solved yet. What exactly did you change in the .css code?

    – grantespo
    Jan 3 at 11:25











  • $(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

    – the_ultimate_developer
    Jan 3 at 11:27











  • When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

    – grantespo
    Jan 3 at 11:28











  • marker as in class="fa fa-3x fa-times" ??

    – the_ultimate_developer
    Jan 3 at 11:31











  • haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

    – grantespo
    Jan 3 at 11:33

















thanks, haven't solved yet. What exactly did you change in the .css code?

– grantespo
Jan 3 at 11:25





thanks, haven't solved yet. What exactly did you change in the .css code?

– grantespo
Jan 3 at 11:25













$(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

– the_ultimate_developer
Jan 3 at 11:27





$(".modal-backdrop").remove() added in js..once i have faced the same issue so i have solved it by adding this

– the_ultimate_developer
Jan 3 at 11:27













When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

– grantespo
Jan 3 at 11:28





When I click the marker, The Black screen goes away, however, my website still freezes and the model does not show.

– grantespo
Jan 3 at 11:28













marker as in class="fa fa-3x fa-times" ??

– the_ultimate_developer
Jan 3 at 11:31





marker as in class="fa fa-3x fa-times" ??

– the_ultimate_developer
Jan 3 at 11:31













haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

– grantespo
Jan 3 at 11:33





haha no sorry, I meant Google Maps Marker, like window.google.maps.event.addListener(marker, 'click', function () {}

– grantespo
Jan 3 at 11:33




















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














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54020568%2fbootstrap-mymodal-modalshow-causes-screen-to-go-black%23new-answer', 'question_page');
}
);

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







Popular posts from this blog

The term 'EXEC' is not recognized as the name of a cmdlet Powershell

Image
up vote 0 down vote favorite I have an SSIS dtsx package that I want to run using PowerShell. Below is what I am using. '"C:Program FilesMicrosoft SQL Server130DTSBinnDTExec.exe" /f "F:SqlExportNew package.dtsx"' Unfortunately I get the below error, and I dont know why EXEC : The term 'EXEC' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + EXEC xp_cmdshell '"C:Program FilesMicrosoft SQL Server130DTSBinn ... + ~~~~ + CategoryInfo : ObjectNotFound: (EXEC:String) , CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException I have enabled the xp_cmdshell in SQL Server using below ...
Read more

NPM command prompt closes immediately [closed]

Image
1 I'm new to nodejs, after installing the node.msi I tried opening the npm command prompt but it closes immediately without even typing any command I go it and I don't know what to do. Pls help windows share | improve this question asked Jan 2 at 0:54 Nexus Nexus 6 1 closed as unclear what you're asking by Dave2e, Book Of Zeus, Ian Lim, user7294900, greg-449 Jan 2 at 10:27 Please clarify your specific problem or add additional details to highlight exa...
Read more

Error binding properties and functions in emscripten

Image
0 I'm trying to use emscripten to compile a c++ class and expose bindings. I'm running into an error from the compiler. #include <emscripten/bind.h> #include <emscripten/emscripten.h> using namespace emscripten; class MyClass { private: int _year; int _month; int _day; public: MyClass() { } MyClass(int year, int month, int day); int getMonth(); void setMonth(int); int getYear(); void setYear(int); int getDay(); void setDay(int); bool isLeapYear(); int daysInMonth(); void increment(); void decrement(); }; EMSCRIPTEN_BINDINGS(my_sample_class) { class_<MyClass>("MyClass") .constructor<>() .constructor<int, int, int>() .function("getMonth", &MyClass::g...
Read more