Jquery open popup on button click for bootstrap

Question

When i click below button       lt button class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal  gt          Launch demo modal      lt  button gt    I open below popup modal    lt  -- Modal -- gt   lt div class  modal fade  id  myModal  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    I refer below example   http   getbootstrap com javascript   My question   How can i open  myModal on button click by using javascript jquery    Any help will be appreciated   Thanks

User · Answer

Below mentioned link gives the clear explanation with example.

http://www.aspsnippets.com/Articles/Open-Show-jQuery-UI-Dialog-Modal-Popup-on-Button-Click.aspx

Code from the same link

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
    rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            modal: true,
            autoOpen: false,
            title: "jQuery Dialog",
            width: 300,
            height: 150
        });
        $("#btnShow").click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none" align = "center">
    This is a jQuery Dialog.
</div>

User · Answer

Give an ID to uniquely identify the button  lets say myBtn     when DOM is ready   document  ready function               Attach Button click event listener          myBtn   click function                 show Modal              myModal   modal  show                  JSFIDDLE

User · Answer

The answer is on the example link you provided   http   getbootstrap com javascript  modals-usage  i e   Call a modal with id myModal with a single line of JavaScript       myModal   modal  show

[javascript] Jquery open popup on button click for bootstrap

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap