Bootstrap 3 modal: make it movable/draggable without jquery-ui - javascript

I'm tring to develop some things:
make a bootstrap modal draggable/movable on the window without jquery-ui
I use backbone.js but I think this is not so important. In a piece of code I define my bootstram modal:
<div id="detailsContainer">
<div class="modal fade" id="someId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Some Title</h4>
</div>
<div class="modal-body" id="content">
<form class="form-horizontal" role="form" id="modalFormBody">
... some content
</form>
</div>
<div class="modal-footer">
<div class="pull-right" id="modalButtonBar">
<button type="button" class="btn btn-default control-button" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary control-button" id="addButton">Add</button>
</div>
</div>
</div>
</div>
Now when I try to use set the modal draggable with this code:
var $container = $("#detailsContainer");
$container.on('mousedown', 'div', function() {
$(this).addClass('draggable').parents().on('mousemove', function(e) {
$('.draggable').offset({
top: e.pageY - $('.draggable').outerHeight() / 2,
left: e.pageX - $('.draggable').outerWidth() / 2
}).on('mouseup', function() {
$(this).removeClass('draggable');
});
});
e.preventDefault();
}).on('mouseup', function() {
$('.draggable').removeClass('draggable');
});
the behaviour is strange:
when I pick up the modal the modal goes out of window. I tried to fix changing some values to top and left, but nothing has been good.
when I pick some under element of the modal-body (for example an Input text), then I can move arround in the modal the input text. But I don't want this! I only want that the whole modal can be draggable/movable.
The example above I have found it on stackoverflow (Sorry I don't find the link on it). I find also some example with jquery-ui. But I don't want to use it. Only Jquery.
I have also tried: Dialog draggable, and JQuery Draggable Demo. But without success.
The first one don't make my modal draggable, and the second one I din't understand how to use it with $container
Can someone help me?
Update
$('body').on('mousedown', '.modal-dialog', function() {
$(this).addClass('draggable').parents().on('mousemove', function(e) {
$('.draggable').offset({
top: e.pageY - $('.draggable').outerHeight() / 2,
left: e.pageX - $('.draggable').outerWidth() / 2
}).on('mouseup', function() {
$(this).removeClass('draggable');
});
});
e.preventDefault();
}).on('mouseup', function() {
$('.draggable').removeClass('draggable');
});
But when I want to drag... it changes the position of where I picked it up the modal. It goes on the corner. Not there where I picked it up? How can I correct this? It's wrong to put the ".modal-dialog" on the mousedown function? And If this is wrong, which element I have to put it there?
And an other point: the elements that I have in the modal body (example drop down) must not be draggable. How can I exclude them?

This answer is too late, but in case someone (like me) was searching for a solution to this. Finally, my solution was to use this code:
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({ handle: "", cursor: "move" }, opt);
var $el = null;
if (opt.handle === "") {
$el = this;
} else {
$el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
var $drag = null;
if (opt.handle === "") {
$drag = $(this).parents('.modal-dialog').addClass('draggable');
} else {
$drag = $(this).parents('.modal-dialog').addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function (e) {
$('.draggable').offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
}).on("mouseup", function () {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function () {
if (opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
Then, when the modal is shown:
$('#modal').on('shown.bs.modal', function () {
$(this).find('.card-header').drags();
});
$('#modal').modal({ show: true, backdrop: 'static', keyboard: false });
I am using a card inside the modal dialog with an HTML like this:
<div id="modal" class="modal fade">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<div class="card">
<div class="card-header border-bottom-0">My super title</div>
<div class="card-body">
<form >...</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnAlmacenar"><i class="fa fa-save"></i> Almacenar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> Cancelar</button>
</div>
</div>
</div>
</div>
This is the whole snippet if you want to try it:
(function ($) {
$.fn.drags = function (opt) {
opt = $.extend({ handle: "", cursor: "move" }, opt);
var $el = null;
if (opt.handle === "") {
$el = this;
} else {
$el = this.find(opt.handle);
}
return $el.css('cursor', opt.cursor).on("mousedown", function (e) {
var $drag = null;
if (opt.handle === "") {
$drag = $(this).parents('.modal-dialog').addClass('draggable');
} else {
$drag = $(this).parents('.modal-dialog').addClass('active-handle').parent().addClass('draggable');
}
var z_idx = $drag.css('z-index'),
drg_h = $drag.outerHeight(),
drg_w = $drag.outerWidth(),
pos_y = $drag.offset().top + drg_h - e.pageY,
pos_x = $drag.offset().left + drg_w - e.pageX;
$drag.css('z-index', 1000).parents().on("mousemove", function (e) {
$('.draggable').offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
}).on("mouseup", function () {
$(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function () {
if (opt.handle === "") {
$(this).removeClass('draggable');
} else {
$(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
$(document).ready(function () {
$('#modal').on('shown.bs.modal', function () {
$(this).find('.card-header').drags();
});
$('#modal').modal({ show: true, backdrop: 'static', keyboard: false });
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<div id="modal" class="modal fade">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<div class="card">
<div class="card-header border-bottom-0">My super title</div>
<div class="card-body">
<form></form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnAlmacenar"><i class="fa fa-save"></i> Almacenar</button>
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-close"></i> Cancelar</button>
</div>
</div>
</div>
</div>

try this code surely it'll helps you, below code is without jquery ui
check this updated fiddle check here
$(function() {
$('body').on('mousedown', '#myModal', function(ev) {
$(this).addClass('draggable').parents().on('mousemove', function(e) {
$('.draggable').offset({
top: e.pageY - $('.draggable').outerHeight() /8,
left: e.pageX - $('.draggable').outerWidth() /8
}).on('mouseup', function() {
$(this).removeClass('draggable');
});
});
ev.preventDefault();
}).on('mouseup', function() {
$('.draggable').removeClass('draggable');
});
});
body {padding:50px;}
div {
cursor:move;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

Related

Doubleclick block Bootstrap Modal Window

When I doubleclick quickly, two modal windows open simultaneously and close button is blocked. You can try live demo in http://1card.digital/prb/modalprb1.html
Link to Open Modal
<a class="btn btn-primary btn-block btn-lg" data-toggle="modal" href="#myModalAgrP" id="modallinkAgrP" data-title="ModalPrb1Mdl">Open Modal</a>
JQuery to Open Modal
<script type = "text/javascript" > $(document).ready(function () {
jQuery('#modallinkAgrP').click(function (e) {
$('#myModalAgrP').modal('hide');
$('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
$('#myModalAgrP').modal({
show: true
});
});
});
});
$(document).on("hidden.bs.modal", "#myModalAgrP", function () {
$('#myModalAgrP').remove();
});
</script>
Modal Code
<div class="modal fade" id="myModalAgrP">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class='modal-title'><a target="_blank" href="#"><span class="fa fa-question-circle"></span></a> Bootstrap Modal</h4>
</div>
<div class="modal-body">
<div class="callout callout-info">Prueba de Bootstrap Modal</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
Thank's a lot for your answer, this code solve my double click problem...
$('a').on('click', function(e){
var $link = $(e.target);
e.preventDefault();
if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 900) {
console.log('clicked');
// doSomething();
}
$link.data('lockedAt', +new Date());
});
You can specify "static" for a backdrop which doesn't close the modal on click.
For example:
jQuery('#modallinkAgrP').click(function (e) {
$('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
$('#myModalAgrP').modal({
show: true,
backdrop: 'static'
});
});
});

Related to Modal Popup in jquery?

I am using modal popup in my project and its working perfectly, I used it in two buttons Edit and Delete, but the problem is when I edit I want to maintain its height according to the project but in case of delete I have to maintain in some other case, so what should I need to do so that I can use one modal but with different functionality.
here, is my modal popup code
<div class="modal inmodal" id="dynamicModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated flipInY">
<div class="modal-header">
<div id="">
<button type="button" class="close" data-dismiss="modal" id="closeModal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
</div>
<div class="modal-body" id="jq-server-response">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary modal-primary-btn jq-modal-primary-btn pull-right margin-left-5">Save changes</button>
<button type="button" class="btn btn-white modal-close-btn pull-right" data-dismiss="modal">Close</button>
<div class="pull-right jq-modal-form-loader hide">
<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dynamic-modal-spinner hide">
<div class="sk-spinner sk-spinner-wave">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
and I give height to modal - body like this
.modal-dialog {
overflow-y: initial !important
}
.modal-body {
height: 600px;
overflow-y: auto;
}
At the time of Edit it open in the way I want like
But, in case of delete, I want less height
here is my javascript code ...
$(function () {
$('.searchclick').click(function () {
$('.jq-billing-meter').removeClass('search-meter');
$(this).parents('.form-group').find('.jq-billing-meter').addClass('search-meter')
//$('.searchclick').parentsUntil('.formgroup');
//$(this).children('input').addClass('activetext');
})
$('body').delegate('.open-dynamic-modal-link', 'click', function (ev) {
var $this = $(this);
modal($this);
});
//click event on modal primary btn
$('body').delegate('.jq-modal-primary-btn', 'click', function (ev) {
var $this = $(this);
var $form = $(this).parents('.modal').find('form');
$form.submit();
});
});
function modal($this) {
var $spinner = $('.dynamic-modal-spinner');
// $("h2").siblings("p").css({ "color": "red", "border": "2px solid red" });
var dataUrl = $this.data('url');
var dataClose = $this.data('close');
var dataPrimary = $this.data('primary');
var dataTitle = $this.data('title');
var onLoadCallback = $this.data('onload');
var hasDataUrl = dataUrl != undefined && typeof dataUrl != "undefined" && dataUrl != '';
var url = hasDataUrl ? dataUrl : $this.attr('href');
if (hasDataUrl == false) {
ev.preventDefault();
}
var isLargeModal = $this.data('large');
var isMiniModal = $this.data('mini');
if (isLargeModal) {
$('#dynamicModal .modal-dialog').addClass('modal-lg');
} else {
$('#dynamicModal .modal-dialog').removeClass('modal-lg');
}
if (isMiniModal) {
$('#dynamicModal .modal-dialog').addClass('modal-sm');
$('#dynamicModal .modal-title').addClass('modal-small-title');
} else {
$('#dynamicModal .modal-dialog').removeClass('modal-sm');
$('#dynamicModal .modal-title').removeClass('modal-small-title');
}
// $('#dynamicModal .modal-title').text(title);
$('#dynamicModal .modal-title').html(dataTitle);
$('#dynamicModal .modal-body').html($spinner.html());
if (dataPrimary) {
$('#dynamicModal .modal-primary-btn').text(dataPrimary)
} else {
$('#dynamicModal .modal-primary-btn').addClass('hide')
}
if (dataClose) {
$('#dynamicModal .modal-close-btn').text(dataClose)
} else {
$('#dynamicModal .modal-close-btn').addClass('hide')
}
$('#dynamicModal').modal({ backdrop: 'static', keyboard: false },'show');
$('#dynamicModal .modal-body').load(url, function () {
// Now that the DOM is updated let's refresh the unobtrusive validation rules on the form:
$('#dynamicModal form').removeData('validator')
.removeData('unobtrusiveValidation');
jQuery.validator.unobtrusive.parse('#dynamicModal form');
//crystalPower.initDatePicker();
if (typeof window[onLoadCallback] == "function") { //if onLoadCallback is a valid function
window[onLoadCallback](); //call function
//} else if (typeof crystalPower[onLoadCallback] == "function") { //if onLoadCallback is a valid function
// crystalPower[onLoadCallback](); //call function
}
//if page has autoCompleteInit function available
if (typeof window["autoCompleteInit"] == "function") {
window["autoCompleteInit"]();
}
});
}

Removing MediaElement.js from Bootstrap Modal

On the page I have a button with several data attributes, title and audioURL. One click, I have some javascript that populates a modal window with the title, and simple html5 audio player with the data-audioURL in the src attribute. Once that is complete, I initialize MediaElement. On success, I play the audio.
When the user closes the modal window, I want to remove the MediaElement so that another button with a different title and audioURL can populate the audio player and then reinitialize MediaElement. Currently, the code I have succeeds to stop the audio playback, but it doesn't destroy the player.
HTML:
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="Song Title" data-audio="audio.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>
<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center">Audio Modal</h4>
</div>
<div class="modal-body">
<h3 id="cl-title" class="text-center"></h3>
<audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
</div>
</div>
</div>
JS:
$(document).ready(function(){
var me;
$('#closerLook').on('shown.bs.modal', function (event) {
$('#audioSample').attr("src", "");
var button = $(event.relatedTarget);
var theTitle = button.data('title');
var theAudio = button.data('audio');
var modal = $(this);
modal.find('#cl-title').text(theTitle);
$('#audioSample').attr("src", theAudio);
loadPlayer();
});
$('#closerLook').on('hide.bs.modal', function (event) {
console.log(me);
me.remove();
});
});
function loadPlayer() {
$('#audioSample').mediaelementplayer({
audioWidth: '100%',
success: function(mediaElement, originalNode, instance) {
mediaElement.play();
me = mediaElement;
}
});
}
I know I'm missing something in the hide.bs.modal function to properly remove the player, I just don't know what. Thanks in advance.
move var me out of document.ready and initialize the variable inside the success function with instance see the working example below
var me;
$(document).ready(function() {
$('#closerLook').on('shown.bs.modal', function(event) {
let button = $(event.relatedTarget);
let theTitle = button.data('title');
let theAudio = button.data('audio');
let modal = $(this);
modal.find('#cl-title').text(theTitle);
//setSrc (src)
$('#audioSample').attr("src", theAudio);
loadPlayer();
});
$('#closerLook').on('hide.bs.modal', function(event) {
console.log('removing');
//me.pause();
me.remove()
});
});
function loadPlayer() {
$('#audioSample').mediaelementplayer({
audioWidth: '100%',
error:function(mediaElement, originalNode, instance) {
console.log('error');
},
success: function(mediaElement, originalNode, instance) {
console.log('success');
console.log(mediaElement)
instance.play();
me = instance;
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelementplayer.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.7/mediaelement-and-player.min.js"></script>
<button type="button" class="btn btn-info btn-lg btn-block" data-toggle="modal" data-target="#closerLook" data-title="SoundHelix" data-audio="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"><i class="fa fa-headphones" aria-hidden="true"></i> Hear a Sample</button>
<div class="modal fade" id="closerLook" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-center">Audio Modal</h4>
</div>
<div class="modal-body">
<h3 id="cl-title" class="text-center"></h3>
<audio id="audioSample" preload="meta" tabindex="0" controls><source src=""/></audio>
</div>
</div>
</div>

auto resizing textarea in a modal

I'm creating a ASP.NET Webpage using Bootstrap and jQuery.
I have recently implemented a modal to show a log. The modal is shown when clicking a link:
<a data-toggle="modal" data-target="#logData">Open</a>
<div class="modal fade" id="logData" tabindex="-1" role="dialog" aria-labelledby="logDataLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Log for #Html.DisplayFor(model => model.Alias)</h4>
</div>
<div class="modal-body">
<textarea class="form-control log" rows="5" placeholder="Log is empty.">#Html.DisplayFor(model => model.Log)</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The modal contains a textarea that doesn't autoresize.
I have found the following code:
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
which should enable my textareas to autoresize and it works other places in my code, but not in this modal above. At least not when typing in the textarea, but upon opening the modal it does seem to autoresize.
Does anyone have an idea of why? And eventually on how to fix it?
Thanks!
You can use this code which will work if the textarea is not hidden (e.g in a modal that is not shown yet)
let setHeight = (input) => {
input.style.overflow = 'hidden';
input.style.height = 0;
input.style.height = `${ input.scrollHeight + 2 }px`;
};
$('textarea').on('input, keyup', function () {
setHeight(this);
})
for bootstrap modal, u can do something like this:
$('.modal').on('shown.bs.modal', function () {
$(this).find('textarea').each(function () {
setHeight(this);
});
})

Focus on a textarea after custom text on a bootstrap floating modal form

I am using bootstrap to invoke a simple modal form which contains only a textarea field and couple of buttons. I am setting some custom text (variable length) in the textarea while invoking the modal form. What I want is to focus on the textarea field after the custom text so the user can start typing after that. I have mentioned my implemenation of this below. Can anyone tell how to achieve this?
Here is the Fiddle: http://jsfiddle.net/jLymtdg8/
A bit explanation here as well -
Here is my modal (all bootstrap stuff)-
<div class="modal fade" id="msg" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Type a message</h4>
</div>
<div class="modal-body">
<textarea id="Message" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Cancel</button>
<button id="PostModalButton" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
And here is how it gets invoked -
<div class="pull-right">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#msg" data-screenname="Type after this">
Post A Message
</button>
</div>
This is how I am prefilling the textarea and setting focus, but this is only setting cursor on first line rather than after screen_name -
$(this).on('shown.bs.modal', '#msg', setFieldAndFocus)
var setFieldAndFocus = function () {
var screen_name = $("button[data-target='#msg']").data("screenname");
$("#Message").val(screen_name + " ");
$("#Message").focus();
};
Sam you can try the following javascript code:-
var screen_name = '',
old_message = '',
new_message = '';
$("#msg").on('shown', function() {
screen_name = $("button[data-target='#msg']").data("screenname"),
old_message = $.trim($('#Message').val()),
new_message = ( old_message.length == 0 ) ? screen_name : old_message;
$("#Message").focus().val(new_message + " ");
});
Let me explain why i have used this code. From the js fiddle link that you have provided what i understand is you are using the bootstrap 2 version, but the code that you are using
$("#msg").on('shown.bs.modal', function(){
...
}
was introduced only in bootstrap 3. so I have changed it to
$("#msg").on('shown', function(){
...
}
and the line
$("#Message").focus().val(new_message + " ");
is used so that you can set the focus after the custom text.I hope this will resolve your issue.
You can take reference of this link : http://jsfiddle.net/3kgbG/433/
It is working for me.
$('.launchConfirm').on('click', function (e) {
$('#confirm')
.modal({ backdrop: 'static', keyboard: false })
.on('')
.one('click', '[data-value]', function (e) {
if($(this).data('value')) {
//alert('confirmed');
} else {
//alert('canceled');
}
});
});
$('#confirm').on('shown', function () {
$('#txtDemo').val($('#txtDemo').val());
$('#txtDemo').focus();
// do something…
})
body,
.modal-open .page-container,
.modal-open .page-container .navbar-fixed-top,
.modal-open .modal-container {
overflow-y: scroll;
}
#media (max-width: 979px) {
.modal-open .page-container .navbar-fixed-top{
overflow-y: visible;
}
}
<div class="page-container">
<div class="container">
<br />
<button class="btn launchConfirm">Launch Confirm</button>
</div>
</div>
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Do you want to continue?
<input id="txtDemo" type="text" value="Jayesh" class="form-control"/>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
<button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
</div>
</div>

Categories