Display Bootstrap Modal using javascript onClick

Question

I need to be able to open a Twitter bootstrap modal window using the onClick    or similar function  Just need the code to go into the onClick     I am trying to make a click-able div to open the modal   Code Excerpts   Div Code    lt div class  span4 proj-div  onClick  open  GSCCModal     gt    Modal Div Code    lt div id  GSCCModal  class  modal hide fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt    Javascript   function open x         x  modal  show

User · Accepted Answer

You don t need an onclick  Assuming you re using Bootstrap 3 Bootstrap 3 Documentation   lt div class  span4 proj-div  data-toggle  modal  data-target   GSCCModal  gt Clickable content  graphics  whatever lt  div gt    lt div id  GSCCModal  class  modal fade  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  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  amp times    lt  button gt           lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt         lt  div gt         lt div class  modal-body  gt                     lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    If you re using Bootstrap 2  you d follow the markup here   http   getbootstrap com 2 3 2 javascript html modals

User · Answer

I was looking for the onClick option to set the title and body of the modal based on the item in a list  T145 s answer helped a lot  so I wanted to share how I used it    Make sure the  tag containing the JavaScript function is of type text javascript to avoid conflicts    lt script type  text javascript  gt  function showMyModalSetTitle myTitle  myBodyHtml                   myModayTitle  and   myModalBody  refer to the  id  of the HTML tags in       the modal HTML code that hold the title and body respectively  These id s       can be named anything  just make sure they are added as necessary                       myModalTitle   html myTitle          myModalBody   html myBodyHtml           myModal   modal  show      lt  script gt    This function can now be called in the onClick method from inside an element such as a button    lt button type  button  onClick  javascript showMyModalSetTitle  Some Title    Some body txt    gt  Click Me   lt  button gt

User · Answer

A JavaScript function must first be made that holds what you want to be done   function print     console log  Hello World        and then that function must be called in the onClick method from inside an element    lt a onClick  print    gt       lt  a gt    You can learn more about modal interactions directly from the Bootstrap 3 documentation found here  http   getbootstrap com javascript  modals  Your modal bind is also incorrect  It should be something like this  where  myModal    ID of element       myModal   modal options    In other words  if you truly want to keep what you already have  put a     in front GSCCModal and see if that works   It is also not very wise to have an onClick bound to a div element  something like a button would be more suitable   Hope this helps

User · Answer

I had the same problem  after researching a lot  I finally built a js function to create modals dynamically based on my requirements  Using this function  you can create popups in one line such as   puyModal  title  Test Title  heading  Heading  message  This is sample message       Or you can use other complex functionality such as iframes  video popups  etc   Find it on https   github com aybhalala puymodals For demo  go to http   pateladitya com puymodals

[javascript] Display Bootstrap Modal using javascript onClick

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

[javascript] Display Bootstrap Modal using javascript onClick

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to modal-dialog