Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

Simple Bootstrap Modal

by
Category:javascript
php ajax javascript html
Simple Bootstrap Modal

Plugins can be included individually (using Bootstrap's individual *.js files), or all at once (using bootstrap.js or the minified bootstrap.min.js). You may also like Live Search in php with Ajax and Mysql and How to search record in mysql codeigniter.

HTMl Code and Jquery Code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Banner Modal Demo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Banner Modal</h4>
        </div>
        <div class="modal-body">
            <img style="width: 100%;" src="http://webwatchdogs.net/wp-content/uploads/2011/05/gallery-and-demo-banner-950x198.jpg" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
    
</div>
<script type="text/javascript">
    $('document').ready(function(){
        $('#myModal').modal('show');
    });
</script>
</body>
</html>

0 Comments


Html code work in comment box


Related Post