open dialog form with bootbox good code

byNongJava •
0

index.html 
  <!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://rawgithub.com/makeusabrew/bootbox/master/bootbox.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    
    <button id="bootbox" class="btn">Open dialog</button>
    
    
  </body>
  
  <div class="form-content" style="display:none;">
      <form class="form" role="form">
        <div class="form-group">
          <label for="email">Email address</label>
          <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="test@mail.ru"></input>
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" class="form-control" id="password" name="password" placeholder="Password">
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> Check me out
          </label>
        </div>
      </form>
    </div>

</html>
style.css 
/* Styles go here */

body {
  padding: 10px;
}
script.js 
  $(document).ready(function() {
  $("#bootbox").on("click", function(event) {
    var modal = bootbox.dialog({
        message: $(".form-content").html(),
        title: "Your awesome modal",
        buttons: [
          {
            label: "Save",
            className: "btn btn-primary pull-left",
            callback: function() {

              alert($('form #email').val());
             
              return false;
            }
          },
          {
            label: "Close",
            className: "btn btn-default pull-left",
            callback: function() {
              console.log("just do something on close");
            }
          }
        ],
        show: false,
        onEscape: function() {
          modal.modal("hide");
        }
    });
    
    modal.modal("show");
  });
  

});
ที่มา http://embed.plnkr.co/s3wNtpffgmVblJmnhLRd/
Tags:

แสดงความคิดเห็น

ใหม่กว่า เก่ากว่า