Modal display onclick jquery - javascript

I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:
Modal:
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>
Jquery:
$(document).ready(function(){
$('button.btn-view-details').on('click', function () {
$('#commonModal').modal('show');
})
})

On your button, you can add data-target attribute and you don't need to trigger the popup via jQuery:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>

You need to add just bootstrap cdns
$(document).ready(function() {
$('button.btn-view-details').on('click', function() {
$('#commonModal').modal('show');
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>

Related

Stop modal from closing on outside click or esc

Hi im trying to disable outside click in my modal. I've tried using methods like backdrop: 'static', keyboard: false but i cant seem to make it work
html:
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
</button>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
javascript:
$(function() {
$('#basicExampleModal').modal('show');
});
You have couple syntax issues in the code you posted. Ex. extra </button> tag and data- keyboard="false"> has a space in it. Aside from the syntax issues, it should work as expected as you can see from below example. If it still doesn't work on your end, there is something else wrong elsewhere in your code.
$('#basicExampleModal').modal('show');
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center>
<h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
</center>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Use this:
$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
keyboard: false,
backdrop: 'static'
})
});
This script will now allow close the modal by clicking outside the modal or by pressing the esc key.

Show Custom Modal

I have bootstrap modal which is not hidden. I mean there is no fade class which is generally seen as <div class="modal fade" role="dialog">. I want to show modal as popup when user clicks on button. The code below does not work as it is unable to detect it as modal.
JS
$(function(){
$('.custom-modal').click(function(e){
e.preventDefault();
var mymodal = $('#myModal');
mymodal.modal('show');
});
})
HTML
<button class="btn btn-primary btn-lg custom-modal">Open Modal</button>
<div id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Can you please check the below code? Hope it will work for you. You just need to add class="modal fade" with id="myModal" and it will work perfectly.
Please refer to this link: https://jsfiddle.net/yudizsolutions/2qfeagc5/
$(function() {
$('.custom-modal').click(function(e) {
e.preventDefault();
var mymodal = $('#myModal');
mymodal.modal('show');
});
})
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<button class="btn btn-primary btn-lg custom-modal">Open Modal</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

How to update a class inside modal body?

I've got a class <div id="modal-data"></div> which is inside a modal
This is the code:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
<div id="modal-data"></div>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
With this piece of code:
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<option value='x'>Create</option>");
But its not working... Can any one help?
Try this
$(document).ready(function() {
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#timezone').html("<option>Hi there</option>");
});
<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"/>
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<select class="js-source-states" style="width: 100%" id="timezone">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
Your DOM structure is wrong you wrote block element div inside select element which is invalid. It should be like following:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
</select>
<div id="modal-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
Also you should write your code under a specific callback, in this case you should in show.bs.modal callback:
$('#mymdl').on('show.bs.modal', function (e) {
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<h1>HI</h1>");
})
$('.modal-content').find('.modal-body').append('<p>append some html here</p>');
$('.modal-content').find('.modal-body').append('<h1>Hi</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Trigger the modal with a button -->
<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>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="mdlbtn">Close</button>
</div>
</div>
</div>
</div>
I think this is what you want. if it is i can explain you

Modal Displayed but show.bs.modal not fired

My Bootstrap modal gets displayed successfully, but the show.bs.modal event isn't getting fired for some reason.
Here is my modal markup:
<div class="modal" tabindex="-1" id="email-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>hi</p>
</div>
</div>
</div>
</div>
and here is my JavaScript:
$('#email-modal').on('show-bs-modal', function (event) {
alert('hello, world!');
});
$('#email-modal').modal();
fiddler
It's a simple typo:
FROM: show-bs-modal TO: show.bs.modal
$('#email-modal').on('show.bs.modal', function (event) {
console.log('hello, world!');
});
$('#email-modal').modal();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal" tabindex="-1" id="email-modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>hi</p>
</div>
</div>
</div>
</div>

Pass ID to bootstrap modal?

I'm using squarespaceModal from this site
I would like to know if is it possible to pass the id to the code of the modal ?
This is the button who's calling the modal :
<div class="center">
<button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
update
</button>
</div>
This is the first line of the modal :
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
That is just a standard Bootstrap Modal I dont see anything special about it. Therefore you have all the events you would like from the modal.
So you "could" write an event to trap everytime a modal is opened.
$(function() {
$('#myModal').on('shown.bs.modal', function() {
alert($(this).attr('id'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
<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="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is my modal body
</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 -->
On your button click set the require value into your input fields of modal and then show modal using below code.
$(".update_pro").click(function () {
$('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
$('#squarespaceModal').modal('show');
});
If come across issue of displaying modal then remove
data-target="#squarespaceModal"
Cheeerssss
Here you go with a solution https://jsfiddle.net/32jsq6aL/
$('button[data-toggle="modal"]').click(function(){
$($(this).data('target')).attr('btn-id', $(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<button id="test 1" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">update</button>
</div>
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
</div>
OnClick on the button, get the data-target and attach an attribute btn-id as button id to the targeted modal.
Hope this will help you.

Categories

Resources