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