I trying to implement swapping of div using dragging and dropping.
It is working fine without modal popup.
But the dragging and dropping is not working when I implement the same inside the modal popup.
What am I missing ?
HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class='droppable'>
<div class="draggable">Draggable 1</div>
</div>
<div class='droppable'>
<div class="draggable">Draggable 2</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
javaScript
$(document).ready(function () {
window.startPos = window.endPos = {};
makeDraggable();
$('.droppable').droppable({
hoverClass: 'hoverClass',
drop: function(event, ui) {
var $from = $(ui.draggable),
$fromParent = $from.parent(),
$to = $(this).children(),
$toParent = $(this);
window.endPos = $to.offset();
swap($from, $from.offset(), window.endPos, 200);
swap($to, window.endPos, window.startPos, 1000, function() {
$toParent.html($from.css({position: 'relative', left: '', top: '', 'z-index': ''}));
$fromParent.html($to.css({position: 'relative', left: '', top: '', 'z-index': ''}));
makeDraggable();
});
}
});
function makeDraggable() {
$('.draggable').draggable({
zIndex: 99999,
revert: 'invalid',
start: function(event, ui) {
window.startPos = $(this).offset();
}
});
}
function swap($el, fromPos, toPos, duration, callback) {
$el.css('position', 'absolute')
.css(fromPos)
.animate(toPos, duration, function() {
if (callback) callback();
});
}
});
Draggable Demo
Draggable Demo inside modal popup
Simply because the modal by default is display: none; so the the javascript can't find the elements to init the function for dragging!
what you need to do is to delay the drag function until the elements are not displayed to none.
other than that the dragging is working, the fiddle was messed up because it was missing the jQuery file, also don't forget the priorities jQuery must be the first JS file to be loaded
https://jsfiddle.net/2eysmghe/2/
Related
As per my current research:
assets are already added
tried removing fade class, no difference
jQuery is not loading twice
assets are loaded in the order, no difference as such
Here is a debug version https://preprod-ansaar.web.app/
I have implemented a bootstrap modal in my app.tsx:
import React from 'react';
const app: React.FC = () => {
return (
<div>
<button id="btn1">Show Modal</button>
<br />
<button data-onclick="alert('Button Clicked')">Another Button</button>
<div className="modal fade" id="myModal" data-tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">Modal Title</h4>
</div>
<div className="modal-body">
Modal Body
</div>
<div className="modal-footer">
<button className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
);
}
export default app;
My index.css is:
#myModal {
position: relative;
}
.modal-dialog {
position: fixed;
width: 100%;
margin: 0;
padding: 10px;
}
And in the index.html I have:
<script>
$('#btn1').click(function () {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
</script>
The same code is generating a draggable modal while keeping background usable on the fiddle
The same is not working in my React app, can anyone please guide on this?
As suggested by #nithin in the comments
The click handlers are registered before the DOM is ready which makes it redundant. Try moving the click handlers to componentDidMount.
componentDidMount() {
//modal logic goes here
}
And the fiddle works because DOM is already initialized (Since you are not using react there) before the script executes
Use React strap .
npm i reactstrap
<Modal isOpen={true}><Modal/>
i try to chenge the src ifame in js but i cant success.
the i frame always empty and without content of new window src.
if i put the src inside the iframe its work ( i cant do that becuse i need id to src and i got that on js function)
html:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe src="" id="iframePOP" style="zoom:0.60" width="99.6%" height="250" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default text-center" data-dismiss="modal">close</button>
</div>
</div>
</div>
js:
function ShowPopup(id) {
$('#myModal').on('show', function () {
document.getElementById("iframePOP").src="/Game.aspx?GameId=" + id;
});
$('#myModal').modal({ show: true })
}
i tried also this:
function ShowPopup(id) {
var frameSrc = "/Game.aspx?GameId=" + id;
$('#myModal').on('show', function () {
$('iframe').attr("src", frameSrc);
});
$('#myModal').modal({ show: true })
}
Have you tried assigning your whole domain name into your var frameSrc?
EDIT:
Try changing $('#myModal').on('show', function () { ... } into $('#myModal').is(':visible', function(){ ... }); and make sure the ID of the modal you are referencing is correct. If that didn't work, try this $('#myModal').on('show.bs.modal', function (e) { ... })
I have two swap-able divs using Jquery Drag and Drop.
When I am trying to swap divs using drag the position of divs during animation is not proper. The swapping of divs is happening properly but problem is during animation.
HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="toz">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class='droppable'>
<div class="draggable">Draggable 1</div>
</div>
<div class='droppable'>
<div class="draggable">Draggable 2</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript
$(document).ready(function() {
window.startPos = window.endPos = {};
makeDraggable();
$('.droppable').droppable({
hoverClass: 'hoverClass',
drop: function(event, ui) {
var $from = $(ui.draggable),
$fromParent = $from.parent(),
$to = $(this).children(),
$toParent = $(this);
window.endPos = $to.offset();
swap($from, $from.offset(), window.endPos, 200);
swap($to, window.endPos, window.startPos, 1000, function() {
$toParent.html($from.css({
position: 'relative',
left: '',
top: '',
'z-index': ''
}));
$fromParent.html($to.css({
position: 'relative',
left: '',
top: '',
'z-index': ''
}));
makeDraggable();
});
}
});
function makeDraggable() {
$('.draggable').draggable({
zIndex: 99999,
revert: 'invalid',
start: function(event, ui) {
window.startPos = $(this).offset();
}
});
}
function swap($el, fromPos, toPos, duration, callback) {
$el.css('position', 'absolute')
.css(fromPos)
.animate(toPos, duration, function() {
if (callback) callback();
});
}
});
Fiddle demo of problem
Simply changing absolute to fixed worked. Fiddle
function swap($el, fromPos, toPos, duration, callback) {
$el.css('position', 'fixed')
.css(fromPos)
.animate(toPos, duration, function() {
if (callback) callback();
});
}
I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" 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="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}
You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/