Skip to content Skip to sidebar Skip to footer
Home / Bootstrap Modal / Html / Twitter Bootstrap

Modal Bootstrap Visible

Post a Comment
My website contains this simple menu home, about me and contact. It's single page website, I want to make it easy for user's when visiting my page, user can scroll down the page t

Solution 1:

Copy pest code in individual file and check in your local it will run. perfect. Given below is modern way of doing it. You can refer this link for further details of the way of creating modal dynamically.

functionopenModalDynamic() {
  var message = $('#content-div');
  BootstrapDialog.show({
    title: 'Default Title',
    message: $('#content-div'),
    buttons: [{
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }],
    onhide: function(dialog) {
      $('#content-container').append(message);
    }
  });
};

functionopenModalDynamic2() {
  BootstrapDialog.show({
    title: 'Default Title',
    message: $('#content-div').clone(true),
    buttons: [{
      label: 'Close',
      action: function(dialog) {
        dialog.close();
      }
    }],
    onhide: function(dialog) {}
  });
}
<!DOCTYPE html><!-- Latest compiled and minified CSS --><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><linkhref="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css"><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"crossorigin="anonymous"><!-- jQuery library --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- Latest compiled JavaScript --><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script><buttontype="button"onclick="openModalDynamic()">Type 1</button><buttontype="button"onclick="openModalDynamic2()">Type 2</button><br> Type 1 : This code will cut the div from original location and put it into your modal.<br> Type 2 : This code will copy the div from original location and put it into your modal. So you will see same div at both the place.<br> This will work great
until and unless you have any activity depending upon id's of elements.
<divstyle="height : 250px"></div><divid="content-container"><divid="content-div"><divclass="panel-group"><divclass="panel panel-default"><divclass="panel-heading">Panel with panel-default class</div><divclass="panel-body">Panel Content</div></div><divclass="panel panel-primary"><divclass="panel-heading">Panel with panel-primary class</div><divclass="panel-body">Panel Content</div></div><divclass="panel panel-success"><divclass="panel-heading">Panel with panel-success class</div><divclass="panel-body">Panel Content</div></div><divclass="panel panel-info"><divclass="panel-heading">Panel with panel-info class</div><divclass="panel-body">Panel Content</div></div><divclass="panel panel-warning"><divclass="panel-heading">Panel with panel-warning class</div><divclass="panel-body">Panel Content</div></div><divclass="panel panel-danger"><divclass="panel-heading">Panel with panel-danger class</div><divclass="panel-body">Panel Content</div></div><divclass="row"><divclass="col-sm-6">
          About US will go here.
        </div><divclass="col-sm-6">
          Contact US will go here.
        </div></div></div></div></div>

Post a Comment for "Modal Bootstrap Visible"