Hoxa – Modal Pop Up Window

This topic contains 4 replies, has 2 voices, and was last updated by  carolinewhittle 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #12647

    carolinewhittle
    Participant

    Unknow

    I’m creating a modal pop up window, which is accessed via the ‘Request Call Back’ button on a test article at the bottom of the page shown on next post.

    However, when I click the button ‘Request Call Back’ button the window displays, but does not float in from the top and overlay the content as it normally would, rather it just pushes the page down and inserts the window as seen below and does not load any styles for form.

    I contacted the developer of the extension, who advises the following:

    *****************

    Only your template’s Bootstrap CSS is loading and apparently it is not loading the CSS rules for the modal Bootstrap component.

    Can you please ask your template to template developer to include the Bootstrap Modal CSS rules in it’s Bootstrap CSS file? This way it will be very easy for you to update your template in the future and also you will not run into this kind of problem from this template provider.

    ******************

    If you would be so kind as to provide an updated CSS file, that would be much appreciated.

    with thanks
    Caroline

    #12648

    carolinewhittle
    Participant

    Unknow
    This reply has been marked as private.
    #12661

    CTHthemes
    Keymaster

    The template doesn’t use bootstrap modal, just dropdown menu module.
    You can ask the plugin author to add modal script for the popup.

    #12662

    CTHthemes
    Keymaster

    Or add this style to template custom.css file

    
    .modal-open {
      overflow: hidden;
    }
    .modal {
      display: none;
      overflow: hidden;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1050;
      -webkit-overflow-scrolling: touch;
      outline: 0;
    }
    .modal.fade .modal-dialog {
      -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
      -o-transform: translate(0, -25%);
      transform: translate(0, -25%);
      -webkit-transition: -webkit-transform 0.3s ease-out;
      -o-transition: -o-transform 0.3s ease-out;
      transition: transform 0.3s ease-out;
    }
    .modal.in .modal-dialog {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0);
    }
    .modal-open .modal {
      overflow-x: hidden;
      overflow-y: auto;
    }
    .modal-dialog {
      position: relative;
      width: auto;
      margin: 10px;
    }
    .modal-content {
      position: relative;
      background-color: #ffffff;
      border: 1px solid #999999;
      border: 1px solid rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
      box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
      -webkit-background-clip: padding-box;
              background-clip: padding-box;
      outline: 0;
    }
    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1040;
      background-color: #000000;
    }
    .modal-backdrop.fade {
      opacity: 0;
      filter: alpha(opacity=0);
    }
    .modal-backdrop.in {
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
    .modal-header {
      padding: 15px;
      border-bottom: 1px solid #e5e5e5;
    }
    .modal-header .close {
      margin-top: -2px;
    }
    .modal-title {
      margin: 0;
      line-height: 1.42857143;
    }
    .modal-body {
      position: relative;
      padding: 15px;
    }
    .modal-footer {
      padding: 15px;
      text-align: right;
      border-top: 1px solid #e5e5e5;
    }
    .modal-footer .btn + .btn {
      margin-left: 5px;
      margin-bottom: 0;
    }
    .modal-footer .btn-group .btn + .btn {
      margin-left: -1px;
    }
    .modal-footer .btn-block + .btn-block {
      margin-left: 0;
    }
    .modal-scrollbar-measure {
      position: absolute;
      top: -9999px;
      width: 50px;
      height: 50px;
      overflow: scroll;
    }
    @media (min-width: 768px) {
      .modal-dialog {
        width: 600px;
        margin: 30px auto;
      }
      .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
      }
      .modal-sm {
        width: 300px;
      }
    }
    @media (min-width: 992px) {
      .modal-lg {
        width: 900px;
      }
    }
    .clearfix:before,
    .clearfix:after,
    .modal-header:before,
    .modal-header:after,
    .modal-footer:before,
    .modal-footer:after {
      content: " ";
      display: table;
    }
    .clearfix:after,
    .modal-header:after,
    .modal-footer:after {
      clear: both;
    }
    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .pull-right {
      float: right !important;
    }
    .pull-left {
      float: left !important;
    }
    .hide {
      display: none !important;
    }
    .show {
      display: block !important;
    }
    .invisible {
      visibility: hidden;
    }
    .text-hide {
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
    }
    .hidden {
      display: none !important;
    }
    .affix {
      position: fixed;
    }
    
    #12673

    carolinewhittle
    Participant

    Unknow

    Many thanks – that’s most useful.

    kind regards
    Caroline

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Hoxa – Modal Pop Up Window’ is closed to new replies.