[英]Rotate text in bootstrap model popup
I am using this code to rotate text in model but this code is not working in model popup? 我使用此代码在模型中旋转文本,但此代码在模型弹出窗口中不起作用?
var rotation = 0;
jQuery.fn.rotate = function (degrees) {
$(this).css({
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'transform': 'rotate(' + degrees + 'deg)'
});
};
$('#btnRotateRight').click(function () {
rotation += 5;
$('.rotate').rotate(rotation);
});
$('#btnRotateLeft').click(function () {
rotation -= 5;
$('.rotate').rotate(rotation);
});
Then following code is Model popup. 然后下面的代码是模型弹出窗口。
$("#ViewDetail").append('<div class="modal-content"><div class="modal-header"><button id="btnRotateLeft" type="button">Rotate Left</button> <button id="btnRotateRight" type="button">Rotate Right</button><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">Preview Cake</h4> </div> <div class="modal-body" style="text-align:center;"><div style="background-image:url(' + data.PrevRoundImg + ');max-width:320px;height:320px;background-repeat: no-repeat;padding-top:40%;" ><div class="rotate"><b id="msgtext" style="font-family:cursive;color:black; text-shadow: 0 0 3px White;font-size:20px;" >' + ckemsg + '</b></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div>');
Your script is not working because you are register event $('#btnRotateRight').click( and $('#btnRotateLeft').click( on dynamic content so for that case you need to register event after render the element in the page or use Jquery on event like as below: 你的脚本无效,因为你是注册事件$('#btnRotateRight')。click(和$('#btnRotateLeft')。点击(关于动态内容,所以在这种情况下你需要在页面中渲染元素后注册事件或者在事件上使用Jquery,如下所示:
$(document).on("click", "#btnRotateRight", function () {
rotation += 5;
$('.rotate').rotate(rotation);
});
$(document).on("click", "#btnRotateLeft", function () {
rotation -= 5;
$('.rotate').rotate(rotation);
});
or register event after render the elements in the page like as below: 或者在渲染页面中的元素后注册事件,如下所示:
$("#btnCheck").click(function () {
$("#ViewDetail").append('<div class="modal-content"><div class="modal-header"><button id="btnRotateLeft" type="button">Rotate Left</button> <button id="btnRotateRight" type="button">Rotate Right</button><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">Preview Cake</h4> </div> <div class="modal-body" style="text-align:center;"><div style="background-image:url(' + data.PrevRoundImg + ');max-width:320px;height:320px;background-repeat: no-repeat;padding-top:40%;" ><div class="rotate"><b id="msgtext" style="font-family:cursive;color:black; text-shadow: 0 0 3px White;font-size:20px;" >' + ckemsg + '</b></div></div></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div>');
RegisterEvents();
});
var rotation = 0;
function RegisterEvents() {
jQuery.fn.rotate = function (degrees) {
$(this).css({
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'transform': 'rotate(' + degrees + 'deg)'
});
};
$('#btnRotateRight').click(function () {
rotation += 5;
$('.rotate').rotate(rotation);
});
$('#btnRotateLeft').click(function () {
rotation -= 5;
$('.rotate').rotate(rotation);
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.