I am trying to copy the current page URL to the clipboard using the ClipboardJS library. I tried my best and asking the question here.
Here is the Code:
Javascript/Jquery:
new Clipboard('.copy', {
text: function(trigger) {
return window.location.href;
}
});
HTML:
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button class="btn btn-default copy">Copy to clipboard</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Open modal
Here is the Code Pen:
http://codepen.io/anon/pen/LWgZpV
I resolved it by
$.fn.modal.Constructor.prototype.enforceFocus = function() {
new Clipboard('.copy', {
text: function(trigger) {
return window.location.href;
}
});
};
Seems like bootstrap has some issue with Clipboard library. Thanks to https://github.com/zenorocha/clipboard.js/issues/155#issuecomment-217372642
Related
When I click on the modal, I have an input field displayed and autocompletion witith ajax to find a product for example.
My apporach does nt work.It open my page SelectPopUpProducts (select_popup_products.php), the autocompletion works fine.
How to open a pop up without to trigger an ajax action $_GET inside the js.
note : bootstrap 5
<div class="col-md-5">
<a
href="<?php echo $this->Orders->link('SelectPopUpProducts'); ?>"
data-bs-toggle="modal" data-refresh="true"
data-bs-target="#myModal4"><?php echo '<h4><i class="bi bi-plus-circle" title="' . $this->Orders->getDef('icon_edit') . '"></i></h4>'; ?></a>
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="te"></div>
</div>
</div> <!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
I tried this but does not work.
My normal js (work):
$( document ).ready(function() {
$("#myModal4").on("show.bs.modal", function(e) {
const link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
})
Try to change by this (not work) :
$(document).ready(function() {
$('[data-bs-toggle="modal"]').click(function(e) {
e.preventDefault();
var data_target=$(this).attr('data-bs-target');
if (data_target=="#") {
data_target="#modal4"+parseInt(Math.random()*1000);
}
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function(data) {
$('<div class="modal hide fade" id="'+data_target.replace("#","")+'">' + data + '</div>')
.modal()
.on('hidden', function(){
$(data_target).remove();
});
}).success(function() {
$('input:text:visible:first').focus();
});
}
});
return false;
});
I have created bootstrap modal, and appending some html through AJAX...
I am not able to show perfect width as per content. I have tried:
width: 'auto'; //it looks as in Screenshot
width: 100%; //it takes whole page width
It looks like:
var PopupHelper = {
Show: function () {
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html(data);
$('#popup-Model').css({ 'width' : 'auto','overflow': 'auto' });
$("#popup-Model").modal();
}
qAjax.Init();
}
}
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body" id="popup_content">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
How to make modal width, as per the content inside modal-body?
NOTE: modal HTML shown in image can vary
Thanks!!!
Since you're already using javascript to render this modal, it will be easier to just set the modal-dialog width to the same width as your content. It's hard to do this only with CSS because modal-dialog have fixed width (varying per screen size).
$("#popup_content").html(data);
$("#popup-Model").modal();
setTimeout(() => {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 30; //Padding
$(".modal .modal-dialog").css({ 'width' : width+'px' });
}, 0); //Maybe you'll need a longer timeout because of css transitions
working example
Worked in OP case as:
$("#popup_content").empty();
var qAjax = new AjaxHelper("/Services/Service.asmx/GetCurrentPopupContent");
qAjax.OnSuccess = function (data) {
$("#popup_content").html('<div class="test-div">' + data + '</div>');
$("#popup-Model").modal();
setTimeout(function () {
//change div:first-child to whatever your first child is
var width = $("#popup_content div:first-child").width() + 50; //padding
$(".modal-dialog").css({ 'width': width + 'px' });
$('#popup-Model').css({ 'overflow': 'auto' });
}, 500);
add row and col-* class in your popup to handle content
<!--Popup Window -->
<div class="modal fade" id="popup-Model" 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" style="margin-top:-10px !important">×</button>
</div>
<div class="modal-body">
<div class="col-xs-12" id="popup_content"></div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--Popup Window -->
try to use min-width and position:relative style to "model-body" class. I hope it will work.
Inside a dropdown-menu I have a button to open a modal popup. If you display the modal popup when you close it, it will also close the dropdown-menu.
How to prevent from closing a dropdown-menu when a modal popup is displayed ?
This is the code :
<div class="dropdown-menu" style="width:240px;">
<div class="row">
<div class="col-xs-6">Log in</div>
<div class="col-xs-6"><img data-toggle="modal" data-target="#myModal" width="20px" src="images/help-question.png"></div>
</div>
...
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
etc...
</div>
ok, I have found a solution :)
var hideLogin = true ;
$('#ModalHelpLogin').on('shown.bs.modal', function (e) {
hideLogin = false ;
})
$('#ModalHelpLogin').on('hidden.bs.modal', function (e) {
hideLogin = true ;
})
$('#DropLogin').on('hide.bs.dropdown', function () {
return hideLogin ;
});
I have the following HTML:
LINKY
<!-- 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 I change the modal iframe src with the following JS, the content of .modal-content is completely overwritten with HTML loaded from the HREF in question on the button that toggled the 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 I prevent Bootstrap from replacing everything in .modal-content?
_target was simple a string value representing an elements ID - not a jQuery object.
Code fixed and updated: http://codepen.io/TheFoot/pen/QbpMYx
Been sweating for days..
I'm running bootstrap 3.1 and want to load different remote pages into my modal depending on what button is clicked.
This works the first time I click the button, but then when I try to load the second page, it throws me an undefined error. Please please help - surely this is a common operation and something I wouldn't think would be that difficult.
<script type="text/javascript">
function modalLoad(remotePage){
$('#myModal').modal({
show: false,
backdrop: true,
keyboard: false,
remote: remotePage
})
$('#myModal').on('show.bs.modal', function (e) {
alert('showing');
});
$('#myModal').on('shown.bs.modal', function (e) {
alert('modal opened');
});
$('#myModal').on('hidden.bs.modal', function (e) {
// tried all of the variations below
$(e.target).removeData("bs.modal").find(".modal-content").empty();
// $(e.target).remove();
// $(this).removeData('bs.modal');
//$("#myModal").remove();
// $(this).data('bs.modal', null);
alert('removed');
});
$('#myModal').modal('show');
};
</script>
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">Update here</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
<button style="primary" onclick="js:modalLoad('remotePage1.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
<button style="primary" onclick="js:modalLoad('remotePage2.html');" class="btn btn-default" name="yt0" type="button">Open Modal</button>
Any help would be so so appreciated.. :S