javascript - bootstrap modal trigger event in incorrect order when jquery mobile CSS is included -


i ran case backdrop being display , modal displayed after backdrop removed. first time ever ran issue after couple years of using bootstrap , i'm not able figure out why. when debugging, callback never triggered on first pass. it's triggered after click on backdrop.

anyone else ran issue before? css conflict potentially? removing jquery-mobile-1.4.2.css seems help, kinda need both of them work together. version of bootstrap i'm using 2.3.2.

this.backdrop(function() {     var transition = $.support.transition && that.$element.hasclass('fade')      if (!that.$element.parent().length) {         that.$element.appendto(document.body) //don't move modals dom position     }      that.$element.show()      if (transition) {         that.$element[0].offsetwidth // force reflow     }      that.$element.addclass('in').attr('aria-hidden', false)      that.enforcefocus()      transition ?          that.$element.one($.support.transition.end, function() {             that.$element.focus().trigger('shown')         }) :          that.$element.focus().trigger('shown')     }) }

jquery mobile , twitter bootstrap use class "fade" , "in" causing conflict. here how got around it.

  1. create override style sheet following classes (these copied bootstrap.css file , modified reference "fade" or "in" becomes "bootstrap-fade" , "bootstrap-in" respectively:

    .modal-backdrop.bootstrap-fade {   opacity: 0; }  .modal-backdrop, .modal-backdrop.bootstrap-fade.bootstrap-in {   opacity: 0.8;   filter: alpha(opacity=80); }  .modal.bootstrap-fade {   -webkit-transition: opacity .3s linear, top .3s ease-out;   -moz-transition: opacity .3s linear, top .3s ease-out;   -o-transition: opacity .3s linear, top .3s ease-out;   transition: opacity .3s linear, top .3s ease-out;   top: -25%; }  .modal.bootstrap-fade.bootstrap-in {   top: 10%; }  .bootstrap-fade {   opacity: 0;   -webkit-transition: opacity 0.15s linear;   -moz-transition: opacity 0.15s linear;   -o-transition: opacity 0.15s linear;   transition: opacity 0.15s linear; }  .bootstrap-fade.bootstrap-in {   opacity: 1; }  @media (max-width: 767px) {     .modal.bootstrap-fade {         top: -100px;     }     .modal.bootstrap-fade.bootstrap-in {         top: 20px;     } }

  2. next need edit bootstrap.js file. can either copy entire modal section, (line 61 - 310), or can edit directly in file find , replace. replace references "fade" , "in" new classes "bootstrap-fade" , "bootstrap-in". there 5 instances of "fade" , 4 instances of "in" in modal section of js file.

  3. once have done that, create modal , use class "bootstrap-fade" instead of "fade".

    <div id="mymodal" class="modal hide bootstrap-fade" tabindex="-1" role="dialog" aria-labelledby=mymodallabel" aria-hidden="true">     <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>         <h2 id="assignmodallabel">modal</h2>     </div>     <div class="modal-body">     </div>     <div class="modal-footer">     </div> </div>

hope helps!


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more