"Bootstrap 4 Modal(İnsert,Update,Delete) işlemleri"
Bootstrap 4.1.1 Snippet by ebubekirbastama

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <meta charset="UTF-8"> <title>Eçk Modal Database İşlemleri</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <!-- En Üst Bölüm --> <div class="jumbotron text-center"> <img src="https://404store.com/2018/08/06/1.png" class="rounded-circle" alt="Cinque Terre"> <h1>Eçk Yazılım Modal İşlemleri</h1> <p>Bootstrap 4(Responsive)Modal insert,update,delete İşlemleri yapılması </p> </div> <!-- En Üst Bölüm --> <!--Navbar Modal Linkler --> <nav class="navbar navbar-expand-lg navbar-light bg-danger"> <a class="navbar-brand" href="#">Eçk Yazılım</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Ana Sayfa <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link active" href="http://www.youtube.com/yazilimegitim">Eğitim Kanalımız</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Modal İşlemleri </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown" > <a class="dropdown-item" data-toggle="modal" data-target="#insert">İnsert Modal</a> <a class="dropdown-item" data-toggle="modal" data-target="#update">Update Modal</a> <a class="dropdown-item" data-toggle="modal" data-target="#delete">Delete Modal</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Ara</button> </form> </div> </nav> <!-- Navbar Modal Linkler --> <!--Modal insert--> <div class="modal fade" id="insert"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Ktap Ekleme Alanı</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal competentlerin eklendiği yer --> <div class="modal-body"> <div class="container"> <form action="/insert.php"> <div class="form-group"> <label for="email">Kitap Barkot Numarası:</label> <input type="email" class="form-control" id="email" placeholder="Kitap Barkot Numaras" name="email"> </div> <div class="form-group"> <label for="pwd">Kitap Adı:</label> <input type="text" class="form-control" id="pwd" placeholder="Ktap Adı" name="pswd"> </div> <div class="form-group"> <label for="pwd">Yazar Adı:</label> <input type="text" class="form-control" id="pwd" placeholder="Yazar Adı" name="pswd"> </div> <div class="form-group"> <label for="pwd">Kitap Kategorisi:</label> <input type="text" class="form-control" id="pwd" placeholder="Kitap Kategorisi" name="pswd"> </div> <div class="form-group"> <label for="pwd">Kitap Özeti:</label> <textarea class="form-control rounded-0" id="ozet" placeholder="Kitap Özeti"></textarea> </div> <button type="submit" class="btn btn-primary">Kaydet</button> </form> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button> </div> </div> </div> </div> <!--Modal insert--> <!--Modal update--> <div class="modal fade" id="update"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Kitap Güncelleme Alanı</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <div class="container"> <div class="row"> <!-- <div class="">--> <div class="table-responsive"> <form action="/insert.php"> <table id="mytable" class="table table-bordred table-striped"> <!--Başlıklar--> <thead> <th>Kitap Adı</th> <th>Yazar Adı</th> <th>Kitap Kategorisi</th> <th>Kitap Özeti</th> <th>Edit</th> </thead> <!--Başlıklar--> <tbody> <tr> <td><textarea class="form-control rounded-0" id="ozet" >Simyacı</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Jounpoule</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Psikoloji</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >abcdsfdsdsegetwebewbd</textarea></td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary" data-title="Edit" data-toggle="modal" data-target="#edit" > <img src="https://404store.com/2018/08/06/edit.png"/> </button></p></td> </tr> <tr> <td><textarea class="form-control rounded-0" id="ozet" >C# Evreni</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Ebubekir Bastama</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Yazılım&Teknoloji</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Sıfırdan C# Eğitim Seti</textarea></td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary" data-title="Edit" data-toggle="modal" data-target="#edit" > <img src="https://404store.com/2018/08/06/edit.png"/> </button></p></td> </tr> <tr> <td><textarea class="form-control rounded-0" id="ozet" >php evreni</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >ebubekir Bastama</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Yazılım Teknoloji</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Php Eğitim Seti</textarea></td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary" data-title="Edit" data-toggle="modal" data-target="#edit" > <img src="https://404store.com/2018/08/06/edit.png"/> </button></p></td> </tr> <tr> <td><textarea class="form-control rounded-0" id="ozet" >Bootstrap 4 Eğitim Seti</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Ebubekir Bastama</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Teknoloji&Yazılım</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Html Eğitim Seti</textarea></td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary" data-title="Edit" data-toggle="modal" data-target="#edit" > <img src="https://404store.com/2018/08/06/edit.png"/> </button></p></td> </tr> <tr> <td><textarea class="form-control rounded-0" id="ozet" >Css Eğitim Seti</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Ebubekir Bastama</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Teknoloji&Yazılım</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >css eğitim seti ebubekir Bastama</textarea></td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary" data-title="Edit" data-toggle="modal" data-target="#edit" > <img src="https://404store.com/2018/08/06/edit.png"/> </button></p></td> </tr> <tr> <td><textarea class="form-control rounded-0" id="ozet" >Kuranı-ı Kerim Eğitim Seti</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Ebubekir Bastama</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Dini Eğitim</textarea></td> <td><textarea class="form-control rounded-0" id="ozet" >Kuran-ı Kerim Eğitim Seti</textarea></td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"> <button class="btn btn-primary" data-title="Edit" data-toggle="modal" data-target="#edit" > <img src="https://404store.com/2018/08/06/edit.png"/> </button></p></td> </tr> </tbody> </table> </form> </div> <!-- </div>--> </div> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Kapat</button> </div> </div> </div> </div> </div> <!--Modal update--> <!-- The Modal --> <div class="modal fade" id="delete"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Kitap Silme Bölümü</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <!--Delete modal Tablosu--> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="table-responsive"> <table id="mytable" class="table table-bordred table-striped"> <thead> <th>Kitap Adı</th> <th>Kitap Yazarı</th> <th>Kitap Kategorisi</th> <th>Kitap Özeti</th> <th>Delete</th> </thead> <tbody> <tr> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-xs" data-title="Delete" data-toggle="modal" data-target="#deletedialog" > <img src="https://404store.com/2018/08/06/delete.png"/></button></p></td> </tr> <tr> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-xs" data-title="Delete" data-toggle="modal" data-target="#deletedialog" > <img src="https://404store.com/2018/08/06/delete.png"/></button></p></td> </tr> <tr> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-xs" data-title="Delete" data-toggle="modal" data-target="#deletedialog" > <img src="https://404store.com/2018/08/06/delete.png"/></button></p></td> </tr> <tr> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-xs" data-title="Delete" data-toggle="modal" data-target="#deletedialog" > <img src="https://404store.com/2018/08/06/delete.png"/></button></p></td> </tr> <tr> <td>Mohsin</td> <td>Irshad</td> <td>CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan</td> <td>isometric.mohsin@gmail.com</td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"> <button class="btn btn-xs" data-title="Delete" data-toggle="modal" data-target="#deletedialog" > <img src="https://404store.com/2018/08/06/delete.png"/> </button> </p> </td> </tr> </tbody> </table> </div> </div> </div> </div> <!--Delete Modal Taablosu--> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Kapat</button> </div> </div> </div> </div> <!--Modal Delete--> <div class="modal fade" id="deletedialog" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button> <h4 class="modal-title custom_align" id="Heading">Kitap Silme!</h4> </div> <div class="modal-body"> <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Kitabı Silmek İstediğinizden Eminmisiniz.</div> </div> <div class="modal-footer "> <button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span>Evet</button> <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>Hayır</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!--Modal Delete--> </body> </html>

Related: See More

Datepicker
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
Squarespace like modal

Questions / Comments: