I have a modal thats being created when "Click me here" button is clicked, Further the modal needs to show a toast modal conveying some Thank you message.
The thank you modal closes the existing modal when save is clicked. The expected was, when save is clicked the save modal should not be unloaded, the thank you modal should be kept loaded over the top of save modal.
When save is clicked I get the error message
Cannot read properties of undefined (reading 'backdrop')
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<button id="clickme">Click me here</button>
<ul class="list-group task-point">
</ul>
<script>
function showToast(m,title="Error") {
$("#modal")
.html(`<div class="modal fade" id="messagemodal" tabindex="-1" role="dialog" aria-labelledby="messagemodal" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="p-2 modal-header">
<h5 class="ms-2 modal-title">${title}</h5>
<button type="button" class="me-1 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="text-start modal-body">
${m}<br/><br/>
</div>
</div>
</div>
</div>`);
var modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
keyboard: false
});
modal.show();
}
$("#clickme").click(function (event) {
var code = $(".dropdown-menu").length+1
$(".task-point").append(`
<li class="list-group-item">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle-${code}" role="button" class="dropdown-item" href="#">Edit ${code}</a></li>
<li><a class="dropdown-item" href="#">Delete ${code}</a></li>
<li><a class="dropdown-item" href="#">Run ${code}</a></li>
</ul>
</div>
<div class="ms-5">This is ${code} item<br/>
<small class="text-secondary">This is a ${code} item description</small>
<div>
<div class="modal fade" id="exampleModalToggle-${code}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" onclick="showToast('Thanks for saving');">Save</button>
</div>
</div>
</div>
</div>
</li>
`);
$(`#exampleModalToggle-${$(".dropdown-menu").length}`).modal("show")
})
</script>
</body>
Please try below code and replace it with your code:
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<style>
.modal-backdrop.fade.show + .modal-backdrop.show {
z-index: 9999;
}
div#messagemodal {
z-index: 99999;
}
</style>
<button id="clickme">Click me here</button>
<ul class="list-group task-point">
</ul>
<div id="modal">
</div>
<script>
function showToast(m,title="Error") {
$("#modal")
.html(`<div class="modal fade" id="messagemodal" tabindex="-1" role="dialog" aria-labelledby="messagemodal" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="p-2 modal-header">
<h5 class="ms-2 modal-title">${title}</h5>
<button type="button" class="me-1 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="text-start modal-body">
${m}<br/><br/>
</div>
</div>
</div>
</div>`);
$("#messagemodal").modal('show');
$(document).on("click", ".me-1", function() { $("#messagemodal").modal('hide'); $("#modal").empty();});
}
$("#clickme").click(function (event) {
var code = $(".dropdown-menu").length+1
$(".task-point").append(`
<li class="list-group-item">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle-${code}" role="button" class="dropdown-item" href="#">Edit ${code}</a></li>
<li><a class="dropdown-item" href="#">Delete ${code}</a></li>
<li><a class="dropdown-item" href="#">Run ${code}</a></li>
</ul>
</div>
<div class="ms-5">This is ${code} item<br/>
<small class="text-secondary">This is a ${code} item description</small>
<div>
<div class="modal fade" id="exampleModalToggle-${code}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1" da>
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="showToast('Thanks for saving');">Save</button>
</div>
</div>
</div>
</div>
</li>
`);
$(`#exampleModalToggle-${$(".dropdown-menu").length}`).modal("show");
})
</script>
</body>
For Thank you popup faded backdrop, put below css in the style sheet
.modal-backdrop.fade.show + .modal-backdrop.show {
z-index: 9999;
}
div#messagemodal {
z-index: 99999;
}
If above css is not working for you then please use parent class name along with the css.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 months ago.
Improve this question
CLick me here button adds the pink block each time its being clicked.
Each pink block has the same menu with edit, delete and run
Everytime a new pink block is added by CLick me here button, it should make a auto click of edit menu of the respective added block so it opens the popup.
So it displays the fullscreen popup.
I have code so far as
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<button id="clickme">Click me here</button>
<script>
$("#clickme").click(function (event) {
$("body").append(`<ul class="list-group">
<li class="list-group-item">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle" role="button" class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Run</a></li>
</ul>
</div>
<div class="ms-5">A First item<br/>
<small class="text-secondary">This is a first item description</small>
<div>
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>`)
})
</script>
</body>
You can use bootstrap own modal functions, specifically .modal(show) to achieve this, and an additional thing to note on this is that you are using same id on all modals which means your edit button will always open the very first modal that you append. to fix that I have added a count variable to make the ids dynamic.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</head>
<body>
<button id="clickme">Click me here</button>
<script>
let count = 0;
$("#clickme").click(function (event) {
$("body").append(`<ul class="list-group">
<li class="list-group-item">
<img src="https://img.icons8.com/color/48/000000/networking-manager.png" class="float-start" />
<div class="btn-group float-end">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Action </button>
<ul class="dropdown-menu dropdown-menu-lg-end">
<li><a data-bs-toggle="modal" href="#exampleModalToggle${count}" class="edit-btn" role="button" class="dropdown-item" href="#">Edit</a></li>
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Run</a></li>
</ul>
</div>
<div class="ms-5">A First item<br/>
<small class="text-secondary">This is a first item description</small>
<div>
<div class="modal fade" id="exampleModalToggle${count}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Create a file ${count}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"> What is Lorem Ipsum? </div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Save</button>
</div>
</div>
</div>
</div>
</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>`)
$(`#exampleModalToggle${count}`).modal("show");
count++;
})
</script>
</body>
My bootstrap modal doesnt show, im getting just faded screen. Its is working on mobile and tablet, but doesnt work on desktop? Anyone have idea why is this happening?
here is code:
<button type="button" class="btn btn-primary" data-toggle="modal" data-toggle="modal" data-target=".bd-example-modal-lg">Open Modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<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">
{{ module.author_image }}
<p>
{{ module.author_name }}
</p>
{{ module.author_description }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
css:
.modal {
text-align: center;
padding: 0!important;
overflow: visible;
display: block;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px; /* Adjusts for spacing */
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
body.modal-open {
overflow: visible;
position: absolute;
width: 100%;
height:100%;
}
js:
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').trigger('focus')
})
Any advice would be helpful, thanks! :)
There are so many conflicts with css and js and classes in html.
Here is the suggestion: if you want any custom change in the modal add a class in the main div and then make the changes with that class only.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
</style>
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Open Modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ module.author_image }}
<p>
{{ module.author_name }}
</p>
{{ module.author_description }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>
You forgot the -bs- inside the classes:
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#myModal"
>
Open Modal
</button>
<div
id="myModal"
class="modal fade bd-example-modal-lg"
tabindex="-1"
role="dialog"
aria-labelledby="myLargeModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal">
×
</button>
</div>
<div class="modal-body">
{{ module.author_image }}
<p>{{ module.author_name }}</p>
{{ module.author_description }}
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-default"
data-bs-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
If I am correct you want the focus to be on an input element when the modal opens:
This is it:
https://jsfiddle.net/cd7z0vtr/7/
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#mdo">Open modal for #mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#fat">Open modal for #fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
JS:
$('#exampleModal').on('shown.bs.modal', function () {
$('#recipient-name').trigger('focus')
})
JSFiddle DEMO: https://jsfiddle.net/2yx16k8L/
I need this JS code to be able to open the entire DIV when clicked. However, this disables the modal button in the dropdown. It won't open the modal anymore.
How do I go about this?
HTML:
<div class="project__body" onclick="location.href='next.html';">
<div class="row">
<div class="col-10">
<h1>Title of the DIV!</h1>
</div>
<div class="col-2 text-right">
<div class="dropdown">
<button type="button" class="dropdown-btn dropdown-toggle" data-toggle="dropdown">Menu</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="edit.html">Edit</a>
<a class="dropdown-item" href="delete.html">Delete</a>
<a class="dropdown-item" data-toggle="modal" data-target="#modal">Copy</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<p>There's more content here in this div. There's more content here in this div. There's more content here in this div. </p>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal">Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>
</div>
<div class="modal-body">
Body of the modal
</div>
</div>
</div>
</div>
JS:
$('.dropdown').click(function(event) {
$(this).children(".dropdown-menu").toggle()
event.stopPropagation();
})
Add this:
$(".dropdown-item[data-target='#modal']").click(function(){
$("#modal").modal("show");
});
Demo:
https://jsfiddle.net/q31juvra/
I am clicking on an <a> tag to open a modal that must display at the center vertically. When i click on the tag, nothing displays. The entire div is rendered but modal doesnt display in the center with backdrop.
In header.blade.php
<div>
<a class="header-text" href="#" data-toggle="modal" data-target="#changeCity">Change City</a>
#include('city-modal')
</div>
In city-modal.blade.php
<div class="modal fade" id="changeCity" tabindex="-1" role="dialog" aria-labelledby="changecitytitle" >
<div class="modal-header">
<div layout="row">
<a href="#">
<img class="app-header__logo" src="{{ assetPath('images/innocity-logo.png') }}">
</a>
<h5 class="modal-title" id="changecitytitle">Choose Your City</h5>
</div>
</div>
<div class="modal-body">
<div layout="row">
<div layout="column">
<a href="#">
<img class="app-header__logo" src="{{ assetPath('images/ahmedabad-city.png') }}">
</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Ahmedabad</button>
</div>
<div layout="column">
<a href="#">
<img class="app-header__logo" src="{{ assetPath('images/jaipur-city.png') }}">
</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Jaipur</button>
</div>
</div>
</div>
</div>
You're not using the correct markup for the modal. It should be:
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
Notice the use of modal-dialog and modal-content.
https://getbootstrap.com/docs/4.0/components/modal/#vertically-centered
I have a bootstrap modal that I want to be draggable. For draggable I tried to restrict it using, containment but it disappears when drag action is done for the first time. Here is my code.
$("#feedbackdialog").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "crosshair",
containment: "parent"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="feedbackdialog" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Firefox version 45.0.2
Run the code in full screen mode(View Full page after running the code snippet) to reproduce the issue. It seems that that modal dialog is moving to top(when run in normal mode).
<div class=" modal fade " id="modalid" tabindex="-1" role="dialog">
<div class="modal-dialog" id="feedbackdialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Comment</h4>
</div>
<div class="modal-body">
<div class="active" id="segtab">
<div align="center" class="form group row">
<textarea id="fdtext" class="form-control form-group" placeholder="Sentence Comment here"></textarea>
<button id="savefdb" class="btn">OK</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#modalid").modal();
$('#feedbackdialog').draggable({
handle: ".modal-header",
cursor: "move",
containment: "parent"
});
</script>
Give two different id's for modal and draggable div and use modal id as containment parent
Try this snippet. Hope this will help you.
$(function(){
$("#myModal").draggable({
handle: ".modal-dialog"
});
});
.modal
{
overflow: hidden;
height:250px;
width:300px;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<div class="side-menu" id="sideMenu">
<menu>
<ul class="nav nav-tabs nav-stacked">
<li>Click Me
</li>
</ul>
</menu>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Greetings!