I want put a button in a web page and show a modal when yo click on it .
i wrote OnClick event function with jQuery.
<div class="modal fade" id="Modal" 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="ModalLabel">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" id="modalbody">
</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>
#section scripts{
<script src="~/Scripts/modal.js"></script>
<script>
$("btnNewGroup").on("click",function () {
$.get("/Admin/PageGroups/Create", function (result) {
$("Modal").modal();
$("ModalLabel").html("Create new group");
$("modalbody").html(result);
})
});
</script>
}
and there is references before render section :
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderSection("scripts", required: false)
The problem is with your jquery selector. You are missing ID selector.
Please check below.
$("#btnNewGroup").on("click",function () {
$.get("/Admin/PageGroups/Create", function (result) {
$("#Modal").modal();
$("#ModalLabel").html("Create new group");
$("#modalbody").html(result);
})
});
Related
I am trying to pass values to my modal in html using JQUERY.
I have this:
<a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#clientStatus" data-clientCurrentStatus="inactive">Change Client Status</a>
<script>
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var clientCurrentStatus = button.data('clientCurrentStatus'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('#clientCurrentStatus').val(clientCurrentStatus);
});
});
</script>
and what I am trying to do is inside data-clientCurrentStatus i am passing the value. and then inside my modal I have this:
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
so as you can see, the id matches, and everything matches. I am not sure why it isn't working. I am importing the jquery tag like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
but nothing is working. how can i fix this?
I think there are some issues with what you can use for attribute names:
http://html5doctor.com/html5-custom-data-attributes/
$(function() {
$('#clientStatus').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var client_current_status = button.data('client_current_status');
var modal = $(this);
modal.find('#clientCurrentStatus').val(client_current_status);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="modal fade" id="clientStatus" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabelLogout">Update Client Status</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Current Status:</p>
<input type="text" name="clientCurrentStatus" id="clientCurrentStatus">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
Logout
</div>
</div>
</div>
</div>
<button type = "button" class="btn btn-primary" data-toggle="modal" data-target="#clientStatus" data-client_current_status="inactive">Change Client Status</button>
I have the below modal and call to the modal:
<button type="button" class="btn btn-outline-primary" data-val="xxx "data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
What I am trying to do, is take the data-val element in the button and pass it into the URL of the modal (replace bxw8pq with whatever data-val is equal to)
I have used this JS to just try and pass the data to the modal & it doesn't work (doesn't do anything at all!)
<script>
$('#exampleModal').on('show.bs.modal', function(e) {
var vidid = $(e.relatedTarget).data('val');
$(this).find(".modal-body").text(vidid);
});
</script>
Do you know how I can make this JS work & also how I can pass the value to the specific part of the string in the modal?
Thanks!!!!
Demo added by community:
$('#exampleModal').on('show.bs.modal', function(e) {
var vidid = $(e.relatedTarget).data('val');
$(this).find(".modal-body").text(vidid);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha512-Dop/vW3iOtayerlYAqCgkVr2aTr2ErwwTYOvRFUpzl2VhCMJyjQF0Q9TjUXIo6JhuM/3i0vVEt2e/7QQmnHQqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button type="button" class="btn btn-outline-primary" data-val="Data value here!" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelDefault" 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>
<h5 class="modal-title" id="exampleModalLabelDefault">Modal title</h5>
</div>
<div class="modal-body">
<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><img src="https://via.placeholder.com/800"></div>
</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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
I'm creating a login page which is based on PHP, I'm trying to make that if there is a server error, a modal will show up. But when I try to do this, an error shows up in the console that says
'$' is not defined
How to make the modal show?
I tried to check if the code actually runs, and it is running.
The modal in the file:
<div class="modal fade bd-example-modal-xl" id="server-error" tabindex="-1" role="dialog" aria-labelledby="server-error" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Server error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Server error, Please contact AlexDorian7.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The code in PHP:
if ($conn->connect_error) {
echo '<script type="text/javascript">showServerErrorMessage()</script>';
}
The code in Javascript:
function showServerErrorMessage() {
$('#server-error').modal('show');
}
Thanks!
Do check if you have all the script and css related to bootstrap
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function showServerErrorMessage() {
$("#server-error").modal('show');
}
</script>
call the function after defining it above
<?php if ($conn->connect_error) { ?>
<script type="text/javascript"> showServerErrorMessage(); </script>
<?php } ?>
you can put your model anywhere in page
<div class="modal fade bd-example-modal-xl" id="server-error" tabindex="-1" role="dialog" aria-labelledby="server-error" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Server error</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Server error, Please contact AlexDorian7.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
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 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>