jquery – 引导模态链接

前端之家收集整理的这篇文章主要介绍了jquery – 引导模态链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使按钮成为一个链接,并在引导3中有一个弹出窗口?

  1. <a href="" data-toggle="modal" data-target=".bannerformmodal">Load me</a>
  2.  
  3. <div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true">
  4. <div class="modal-dialog modal-sm">
  5. <div class="modal-content">
  6. <div class="modal-content">
  7. <div class="modal-header">
  8. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  9. <h4 class="modal-title" id="myModalLabel">Contact Form</h4>
  10. </div>
  11. <div class="modal-body">
  12. <form id="requestacallform" method="POST" name="requestacallform">
  13.  
  14. <div class="form-group">
  15. <div class="input-group">
  16. <span class="input-group-addon"><i class="fa fa-user"></i></span>
  17. <input id="first_name" type="text" class="form-control" placeholder="First Name" name="first_name"/>
  18. </div>
  19. </div>
  20. <div class="form-group">
  21. <div class="input-group">
  22. <span class="input-group-addon"><i class="fa fa-user"></i></span>
  23. <input id="last_name" type="text" class="form-control" placeholder="Last Name" name="last_name"/>
  24. </div>
  25. </div>
  26. <div class="form-group">
  27. <div class="input-group">
  28. <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
  29. <input id="email1" type="text" class="form-control" placeholder="Email" name="email1" onchange="validateEmailAdd();"/>
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <div class="input-group">
  34. <span class="input-group-addon"><i class="fa fa-group"></i></span>
  35. <input id="company_name_c" type="text" class="form-control" placeholder="Company Name" name="company_name_c"/>
  36. </div>
  37. </div>
  38. <div class="form-group">
  39. <div class="input-group">
  40. <span class="input-group-addon"><i class="fa fa-phone"></i></span>
  41. <input id="phone_mobile" type="text" class="form-control" placeholder="Mobile" name="phone_mobile"/>
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <div class="input-group">
  46. <span class="input-group-addon"><i class="fa fa-building-o"></i></span>
  47. <select class="form-control" name="monthly_rental" class="selectpicker">
  48. <option>How many seats do you have available?</option>
  49. <option>10-50</option>
  50. <option>50-100</option>
  51. <option>100-200</option>
  52. <option>200-500</option>
  53. <option>500+</option>
  54. </select>
  55. </div>
  56. </div>
  57. <div class="control-group">
  58. <div class="controls">
  59. <textarea id="description" type="text" name="description" placeholder="Description"></textarea>
  60. </div>
  61. </div>
  62.  
  63. </form>
  64. </div>
  65. <div class="modal-footer">
  66. <button type="button" class="btn btn-blue">Submit</button>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. </div>

解决方法

删除。从你的目标应该是一个id
  1. <a href="#" data-toggle="modal" data-target="#bannerformmodal">Load me</a>

另外你必须给出你的模态ID,如下所示

  1. <div class="modal fade bannerformmodal" tabindex="-1" role="dialog" aria-labelledby="bannerformmodal" aria-hidden="true" id="bannerformmodal">

希望这将解决问题,如果仍然存在,将为您创造一个小提琴。

猜你在找的jQuery相关文章