Bootstrap modal link

Question

How can I make button become a link only and have a popup in bootstrap 3   code    lt a href    data-toggle  modal  data-target   bannerformmodal  gt Load me lt  a gt    lt div class  modal fade bannerformmodal  tabindex  -1  role  dialog  aria-labelledby  bannerformmodal  aria-hidden  true  gt     lt div class  modal-dialog modal-sm  gt       lt div class  modal-content  gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt             lt h4 class  modal-title  id  myModalLabel  gt Contact Form lt  h4 gt           lt  div gt           lt div class  modal-body  gt             lt form id  requestacallform  method  POST  name  requestacallform  gt                lt div class  form-group  gt                 lt div class  input-group  gt                                                  lt span class  input-group-addon  gt  lt i class  fa fa-user  gt  lt  i gt  lt  span gt                   lt input id  first name  type  text  class  form-control  placeholder  First Name  name  first name   gt                 lt  div gt               lt  div gt               lt div class  form-group  gt                 lt div class  input-group  gt                                                  lt span class  input-group-addon  gt  lt i class  fa fa-user  gt  lt  i gt  lt  span gt                   lt input id  last name  type  text  class  form-control  placeholder  Last Name  name  last name   gt                 lt  div gt               lt  div gt               lt div class  form-group  gt                 lt div class  input-group  gt                                                  lt span class  input-group-addon  gt  lt i class  fa fa-envelope  gt  lt  i gt  lt  span gt                   lt input id  email1  type  text  class  form-control  placeholder  Email  name  email1  onchange  validateEmailAdd      gt                 lt  div gt               lt  div gt               lt div class  form-group  gt                 lt div class  input-group  gt                                                  lt span class  input-group-addon  gt  lt i class  fa fa-group  gt  lt  i gt  lt  span gt                   lt input id  company name c  type  text  class  form-control  placeholder  Company Name  name  company name c   gt                 lt  div gt               lt  div gt               lt div class  form-group  gt                 lt div class  input-group  gt                                                  lt span class  input-group-addon  gt  lt i class  fa fa-phone  gt  lt  i gt  lt  span gt                   lt input id  phone mobile  type  text  class  form-control  placeholder  Mobile  name  phone mobile   gt                 lt  div gt               lt  div gt               lt div class  form-group  gt                 lt div class  input-group  gt                   lt span class  input-group-addon  gt  lt i class  fa fa-building-o  gt  lt  i gt  lt  span gt                   lt select class  form-control  name  monthly rental  class  selectpicker  gt                     lt option gt How many seats do you have available  lt  option gt                     lt option gt 10-50 lt  option gt                     lt option gt 50-100 lt  option gt                     lt option gt 100-200 lt  option gt                     lt option gt 200-500 lt  option gt                     lt option gt 500  lt  option gt                   lt  select gt                 lt  div gt               lt  div gt               lt div class  control-group  gt                 lt div class  controls  gt                                        lt textarea id  description  type  text  name  description   placeholder  Description  gt  lt  textarea gt                 lt  div gt               lt  div gt              lt  form gt           lt  div gt           lt div class  modal-footer  gt             lt button type  button  class  btn btn-blue  gt Submit lt  button gt           lt  div gt                 lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

A Simple Approach will be to use a normal link and add Bootstrap modal effect to it  Just make use of my Code  hopefully you will get it run      lt div class  container  gt           lt div class  row  gt               lt div class  modal fade  id  myModal  tabindex  -1  role  dialog  aria-labelledby  addContact  aria-hidden  true  gt                   lt div class  modal-dialog  gt                       lt div class  modal-content  gt                           lt div class  modal-header  gt                               lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  lt b style  color  fb3600  font-weight 700   gt X lt  b gt  lt  button gt  lt  -- amp times -- gt                               lt h4 class  modal-title text-center  id  addContact  gt Add Contact lt  h4 gt                           lt  div gt                           lt div class  modal-body  gt                               lt div class  row  gt                                   lt ul class  nav nav-tabs  gt                                       lt li class  active  gt                                           lt a data-toggle  tab  style  background-color  f5dfbe  href   contactTab  gt Contact lt  a gt                                       lt  li gt                                       lt li gt                                           lt a data-toggle  tab  style  background-color  a6d2f6  href   speechTab  gt Speech lt  a gt                                       lt  li gt                                   lt  ul gt                                   lt div class  tab-content  gt                                       lt div id  contactTab  class  tab-pane in active  gt  lt partial name  CreateContactTag  gt  lt  div gt                                       lt div id  speechTab  class  tab-pane fade in  gt  lt partial name  CreateSpeechTag  gt  lt  div gt                                   lt  div gt                                lt  div gt                           lt  div gt                           lt div class  modal-footer  gt                               lt a class  btn btn-info  data-dismiss  modal  gt Close lt  a gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt

User · Answer

Please remove   from your target it should be a id   lt a href   bannerformmodal  data-toggle  modal  data-target   bannerformmodal  gt Load me lt  a gt    Also you have to give your modal id like below   lt div class  modal fade bannerformmodal  tabindex  -1  role  dialog  aria-labelledby  bannerformmodal  aria-hidden  true  id  bannerformmodal  gt    Here is the solution in a fiddle

[jquery] Bootstrap modal link

Examples related to jquery

Examples related to twitter-bootstrap