mercredi 31 décembre 2014

LinkedIn Share button breaks Bootstrap Modal


We recently added the LinkedIn share button to a site of ours with Bootstrap. After some testing, we realized this script, http://ift.tt/IX0rQc, overwrites (at the very least) the Bootstrap functionality for the modals. I don't know if it overwrote any of its other functionality, because we were only looking at the modals.


Is LinkedIn aware of this issue, and is their a solution to the problem?


Update:


Yes, I was sent here by Linked-in. After posting to their forum, I was directed here by who I think is a site admin.


Here is some code:



<div class="modal fade" id="BlogEmail" role="dialog" aria-hidden="true">
****Modal content****
</div>


Nothing special, just a simple Bootstrap modal. And the trigger to open:



<a href="#" title="Subscribe by email"><i class="fa fa-envelope-o rl-blog-icon" data-toggle="modal" data-target="#BlogEmail"></i></a>


This works fine, as intended, until adding the Linkedin script. Once this is added:



<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>


The Modal functionality breaks. Typing the following in the console:



$("#BlogEmail").modal();


or



$("#BlogEmail").modal('show');


throws:



TypeError: undefined is not a function



The above does work when the Linked-in js is not included.


Another update:


I downloaded the file, http://ift.tt/IX0rQc, and found this:



$_CONSTANTS.modes


and is used in this capacity (this is assigned to multiple vars/objects multiple times)



d=$_CONSTANTS.modes;


and the conflict



d.modal


$_CONSTANTS is defined here:



http://ift.tt/1y6NiCN


so I downloaded this, and overrode it so it loaded my version.


and on line 830



(function(){$_CONSTANTS={ ... modal:"modal" ... };


so I replaced all property references from modal to modals in both files


this causes these two lines to break, on line 1172, so I commented them out



IN.Event.on(window,b.beforeUnload,$_STATISTICS.firePing);
IN.Event.on(window,b.unload,$_STATISTICS.firePing)


The sharing now works but the Bootstrap modal is still broken.


Going back to unmodified files,


The Bootstrap code that breaks is :



var manager = typeof this.options.manager === 'function' ?
this.options.manager.call(this) : this.options.manager;

manager = manager.appendModal ?
manager : $(manager).modalmanager().data('modalmanager');

manager.appendModal(this);


I'm beginning to redefine the class definition of Modal to Modals, to see if I can get the conflict to go away, since the Bootstrap's code is more manageable. I'll update with what I find.





Aucun commentaire:

Enregistrer un commentaire