Skip to content

Instantly share code, notes, and snippets.

@henideepak

henideepak/Dynamic bootstrap modal show

Created July 29, 2021 12:35
Show Gist options
  • Save henideepak/db896c4470115bff5ec40a22e33be618 to your computer and use it in GitHub Desktop.
Save henideepak/db896c4470115bff5ec40a22e33be618 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic bootstrap modal show
Raw
Dynamic bootstrap modal show
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="title">
<h3>Lorem ipsum dolor sit amet</h3>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper dictum sapien. Duis vel hendrerit mi. Vivamus tincidunt, mauris sit amet efficitur placerat, velit tortor posuere ex, nec sagittis ligula mi in justo. Nulla a augue dolor. Phasellus aliquam posuere tincidunt. Mauris congue malesuada iaculis. Fusce quis tortor a felis mattis dignissim sit amet eu sem. Pellentesque feugiat sodales enim, quis interdum libero posuere sed.</p>
</div>
<a href="javascript:void(0);" class="btn show btn-primary" data-toggle="modal" data-target="#modal_ajax">Show</a>
</div>
<div class="col-sm-4">
<div class="title">
<h3>Proin justo ipsum</h3>
</div>
<div class="content">
<p>Proin justo ipsum, bibendum ut rutrum sed, convallis quis arcu. Nunc aliquam lectus id risus luctus congue. Nunc ex lorem, vehicula quis dolor quis, eleifend semper nisl. Proin dui ex, aliquet id dictum sed, feugiat condimentum velit. In suscipit neque vitae tincidunt porta. Nulla vitae nibh id justo tristique porttitor. Nam elit dolor, gravida nec libero ullamcorper, pharetra malesuada quam. Phasellus bibendum purus id risus scelerisque ullamcorper id at sem. </p>
</div>
<a href="javascript:void(0);" class="btn show btn-primary" data-toggle="modal" data-target="#modal_ajax">Show</a>
</div>
<div class="col-sm-4">
<div class="title">
<h3>Nunc eget tincidunt enim</h3>
</div>
<div class="content">
<p>Nunc eget tincidunt enim, blandit malesuada purus. Nunc ut neque a dolor convallis fringilla. Curabitur vitae leo lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum feugiat ex a tincidunt dictum. Etiam sit amet felis dolor. Sed a imperdiet arcu. Aenean ultrices ipsum leo, quis dictum enim viverra a. Sed posuere velit ultrices nisi euismod, id faucibus quam posuere. Mauris sit amet tempor nibh.</p>
</div>
<a href="javascript:void(0);" class="btn show btn-primary" data-toggle="modal" data-target="#modal_ajax">Show</a>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal_ajax" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content" id="ajax_content">
<div class="modal-header">
<h5 class="modal-title" id="modal_ajax_title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<!-- Modal -->
</body>
</html>
<script>
$(document).ready(function() {
$('.show').on('click', function() {
var This = $(this);
var title = This.parent().find('.title').html();
var body = This.parent().find('.content').html();
$('.modal .modal-title').html(title);
$('.modal .modal-body').html(body);
$('#modal_ajex').show();
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment