Modal function is working but My Js won't work.
I have code from bootstrap 4 modal
<div id="qmsManual" tabindex="-1" role="dialog" aria-labelledby="qmsManualModal" aria-hidden="true" class="modal fade text-left">
<div role="document" class="modal-dialog qms-dialog">
<div class="modal-content qms-modal">
<div class="modal-header">
<h4 id="qmsManualModal" class="modal-title">QMS Manual</h4>
<button type="button" data-dismiss="modal" aria-label="Close" class="close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<object data="../Files/Manual/QMS-Manual.pdf#toolbar=0&navpanes=0&statusbar=0&view=Fit;readonly=true;disableprint=true;" type="application/pdf" width="100%">
<p>Your web browser doesn't have a PDF plugin.
Instead you can <a href="../Files/Manual/QMS-Manual.pdf">click here to
download the PDF file.</a></p>
</object>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
<button type="button" class="btn btn-primary"><em class="ti-download"></em> Download</button>
</div>
</div>
</div>
</div>
Then here is my JS and It works fine in my bootstrap 4 modal. (trying it to make draggable and resizable):
$(document).ready(function() {
$('.qms-modal').resizable({
//alsoResize: ".modal-dialog",
minHeight: 300,
minWidth: 300
});
$('.qms-dialog').draggable();
$('#qmsManual').on('show.bs.modal', function() {
$(this).find('.modal-body').css({
'max-height': '100%'
});
});
});
And plugin scripts
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper.js/umd/popper.min.js"> </script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="vendor/jquery-validation/jquery.validate.min.js"></script>
<script src="js/charts-home.js"></script>
<script src="../assets/JS/ajax.googleapis.com-ajax-libs-jquery-3.3.1-jquery.min.js"></script>
You can refer to this code, it works fine
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
</body>
$('.modal-content').resizable({
//alsoResize: ".modal-dialog",
minHeight: 300,
minWidth: 300
});
$('.modal-dialog').draggable();
$('#myModal').on('show.bs.modal', function() {
$(this).find('.modal-body').css({
'max-height': '100%'
});
});
From CodePen
Related
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')
})
I am trying to set up a page with 14 different modals. I previously set them up so they would all open normally, and they've worked. But I found something to let me make them draggable when opened. So I am trying to figure out how to do that, and finally got it to work, but only with one modal. My other modals do not open unless I change the code to reflect the name of that modal instead. Then the first modal doesn't work. Please tell me how to make the JavaScript code generalized for all of my modals.
Here is my script's code:
<script type="text/javascript">
window.onload=function(){
$('#btn1').click(function() {
// reset modal if it isn't visible
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 110,
left: 500
});
}
$('#modal1').modal({
backdrop: true,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
}
</script>
Here is my modals' code, with only two modals instead of all 14:
<button id="btn1" class="btn btn-info btn-lg" data-target="#modal1">Modal 1</button>
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Modal 1</h4>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<button id="btn2" class="btn btn-info btn-lg" data-target="#modal2">Modal 2</button>
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" >Modal 2</h4>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
If I add another script after the one I have with a new "#btn" and/or a new "#modal", the latter one only works.
If I add a comma after the first "btn" and or "modal", it makes the two modals overlap.
Can someone help please? What am I doing wrong?
If you would like to avoid setting all the modals in JavaScript (and assuming you don't want to add additional coding per each modal), could you just make them all toggle via HTML data attributes? Then you'd only need to initialize your draggable code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Description of the page less than 150 characters">
<title>Modals</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal1Label">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal2" tabindex="-1" role="dialog" aria-labelledby="modal2Label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal2Label">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid h-100">
<h1>Modals</h1>
<button type="button" id="btn1" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal1">Modal 1</button>
<button type="button" id="btn2" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal2">Modal 2</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggable/1.0.0-beta.8/draggable.js" integrity="sha256-IqgasFC+xodVUxVInsmbOaKvevIOjh9iqPUBPd2tyVs=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('.modal-dialog').draggable({
handle: ".modal-header"
});
});
</script>
</body>
</html>
I use BS modals without backdrop and with custom overlay styling, so they look like a floating windows - for example for cookie consent (but not only for that). I know that to make button elements clickable, I have to set
.modal { pointer-events: none }
But what to do if I want to make input elements focusable (and writeable) when modal is shown?
Here's my code or fiddle if you prefer.
$("#exampleModal").modal({
backdrop: false,
show: true
})
.modal { pointer-events: none; }
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<input type="text" value="Hi">
<!-- Modal -->
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can disable the focus listener which bootstrap is setting on shown of the modal. Then you can edit the textfields also.
$("#exampleModal").modal({
backdrop: false,
show: true
})
$('#exampleModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
.modal { pointer-events: none }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<input type="text" value="Hi">
<!-- Modal -->
<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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
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!
I have a project and I'm using bootstrap modal and my modal must open automatically it's okey so far then open I want to close it after 10 or 30 seconds how to do it ?
$(function(){
setTimeout(function(e){
var delayModal = $(e).parents(".modal").attr("data-delay");
$('#memberModal').modal('show');
}, parseInt(delayModal)*1000);
});
but it works with this function but this is not dynamically could you help me to do what I want ? and auto closing with settimeout ? I gotta learn how to do it
$(function(){
setTimeout(function(e){
$('#memberModal').modal('show');
}, parseInt(5)*1000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="5">
<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" id="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>
Just add $('#memberModal').modal('hide') in the timeout, after you open the modal.
$(function(){
setTimeout(function(e){
$('#memberModal').modal('show');
}, parseInt($('#memberModal').attr('data-open')) * 1000);
setTimeout(function(e){
$('#memberModal').modal('hide');
}, parseInt($('#memberModal').attr('data-delay')) * 1000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="6" data-open="2">
<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" id="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>
You can do it dynamically like this
$(function(){
var delayModal = $(".modal").attr("data-delay");
setTimeout(function(e){
$('#memberModal').modal('show');
}, parseInt(delayModal)*1000);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true" data-delay="5">
<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" id="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>
Automation show and hide modal
$(function(){
var modal = $('#memberModal');
var showDelay = parseInt(modal.data('delay'));
var closeDelay = parseInt(modal.data('close'));
var openByTimeout = false;
setTimeout(function(e){
openByTimeout = true;
modal.modal('show');
}, showDelay*1000);
modal.on('show.bs.modal', function () {
if (openByTimeout) {
setTimeout(function(e){
openByTimeout = false;
modal.modal('hide');
}, closeDelay*1000);
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="memberModal" data-delay="1" data-close="2" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<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" id="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.
<BR> If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<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>