Default Theme - bootstrap modals not working correctly

[jucedupp]

Hi all

 

I have this code on authentication.tpl:

<div class="modal fade" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <h4 class="modal-title">Enjoy the convenience of shopping online for top Samsung devices at lower prices</h4>
          </div>
          <div class="modal-body">
            <p>
                <ul>
                    <li>We offer preferential pricing to Liberty Own Your Life Rewards members.</li>  
                    <li>To qualify for this, <a href="https://www.libertylifestylerewards.co.za/index.cfm">click here to go to Liberty Own Your Life Rewards website.</a> </li>
                    <li>If not, simply click the close button to continue.</li>  
                </ul>    
            </p>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

I am triggering it on the "Create an Account" button like this:

    <button class="btn btn-default button button-medium exclusive" type="submit" id="SubmitCreate" name="SubmitCreate" data-toggle="modal" data-target="#myModal">
       <span>
           <i class="icon-user left"></i>
               {l s='Create an account'}
       </span>
    </button>

However, this does not fire the modal.  It simply unhides the div and displays it on the page.  No JS errors are being thrown.

 

Any ideas?

Edited July 20, 2015 by jucedupp (see edit history)

[NemoPS]

Try this other method:http://blog.arvixe.com/triggering-custom-popups-in-prestashop/

[jucedupp]

Try this other method:http://blog.arvixe.com/triggering-custom-popups-in-prestashop/

 

Hi Nemo1

 

I followed your instructions precisely, but it seems that /login does not have fancybox loaded.  It gives me:

 

Timestamp: 2015/07/20 12:47:22 PM

Error: TypeError: $(...).fancybox is not a function

Source File: http://website.url/themes/default-bootstrap/js/global.js

Line: 29

$(document).ready(function(){
$('.modalbox').fancybox({type:'ajax'});
highdpiInit();

And the code from athentication.tpl

<button class="btn btn-default button button-medium exclusive modalbox" type="submit" id="SubmitCreate" name="SubmitCreate">

Any ideas?

[kassimi.hn]

Hi ,

 

I'm having the same problem ,dont know what's wrong,any one can help me

[Adam_Uy]

Bootstrap modals in prestashop doesn't have css in it. What i did is i copied the css from bootstrap.css and i pasted it in global.css.

 

 

.modal-open {
  overflow: hidden;
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  outline: 0;
}
.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform .3s ease-out;
       -o-transition:      -o-transform .3s ease-out;
          transition:         transform .3s ease-out;
  -webkit-transform: translate(0, -25%);
      -ms-transform: translate(0, -25%);
       -o-transform: translate(0, -25%);
          transform: translate(0, -25%);
}
.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: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 6px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
}
.modal-backdrop.fade {
  filter: alpha(opacity=0);
  opacity: 0;
}
.modal-backdrop.in {
  filter: alpha(opacity=50);
  opacity: .5;
}
.modal-header {
  min-height: 16.42857143px;
  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-bottom: 0;
  margin-left: 5px;
}
.modal-footer .btn-group .btn + .btn {
  ;
}
.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, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

hope this helps.

 

Edited April 15, 2016 by Adam_Uy (see edit history)

[NemoPS]

For the js error, it means you did not include fancybox in the controller

[kassimi.hn]

I have tried this solution and it works fine for me 

 

blog.arvixe.com/triggering-custom-popups-in-prestashop/

 

thank you all

[electrostuff_de]

This helped me out, thx! Version 1.6