i have following html:
<a href="http://domainx.com/" class="btn btn-primary" data-toggle="modal" data-target="#mymodal">linky</a> <!-- modal --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> </div> <div class="modal-body"> <h4 class="modal-title" id="mymodallabel">modal title</h4> <iframe src="http://domainy.com/" width="100%" height="380" frameborder="0" allowtransparency="true"></iframe> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal -->
when change modal iframe src following js, content of .modal-content
overwritten html loaded href in question on button toggled modal.
$('[data-target="#mymodal"]').on('click', function (e) { e.preventdefault(); var _linky = $(this).attr('href'); var _target = $(this).data('target'); if (_target.length > 0) { _target.find('iframe').attr('src', 'about:blank'); var _isremote = false; if (_linky.indexof('http') > -1) { _isremote = true; } if (!_isremote) { if (_linky.indexof('?') > -1) { _linky += '&tmpl=component'; } else { _linky += '?tmpl=component'; } } _target.find('iframe').attr('src', _linky).load(function() { _target.modal('show'); }); } }); $('body').on('hidden.bs.modal', '.modal', function () { $(this).removedata('bs.modal'); });
how can prevent bootstrap replacing in .modal-content
?
_target
simple string value representing elements id - not jquery object.
code fixed , updated: http://codepen.io/thefoot/pen/qbpmyx
Comments
Post a Comment