CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
sooraj s pillai
sooraj s pillai

Reputation: 916

Jquery modal not working properly

I am trying to use jquery ui modal but it doesnot working as my needs ie, i want to show the data only inside the modal but here it shows before i clicking the button .

function pop_up()
{
var dialog, form
        dialog = $('div#infoDialog').dialog({
          autoOpen: false,
          height: 600,
          width: 500,
          modal: true
        });
        $('#showInfos').click(function(e){
          e.preventDefault();
          dialog.dialog('open');
        });
}
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <button type="button" id="showInfos" onclick="pop_up();">test</button>
    <div id="infoDialog" title="Eventinfos">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </div>

Upvotes: 2

Views: 3092

Answers (2)

Abdullah Shoaib
Abdullah Shoaib

Reputation: 464

Your code is almost correct, you just have one mistake in your code and that is you bind all of your javascript code with onclick event that's why it is showing the modal content by default. So now you just have to remove the onclick event and pop_up() function. So your final code will be look like below. 

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />

    <button type="button" id="showInfos" >test</button>
    <div id="infoDialog" title="Eventinfos">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        
      </p>
    </div>

    <script>
   // function pop_up()
  // {
  var dialog, form
          dialog = $('div#infoDialog').dialog({
            autoOpen: false,
            height: 600,
            width: 500,
            modal: true
          });
          $('#showInfos').click(function(e){
            e.preventDefault();
            dialog.dialog('open');
          });
  // }
    </script>

Upvotes: 3

JanR
JanR

Reputation: 6132

it's better to setup the modal once on page load using the DOM ready event: (more information : https://learn.jquery.com/using-jquery-core/document-ready/)

$(document).ready(function(){
    $('div#infoDialog').dialog({
       autoOpen: false, // this should be false unless you want it opened from the start
       height: 600,
       width: 500,
       modal: true
    });

    //now let's bind the click event:
    $('#showInfos').click(function(){
       $('div#infoDialog').dialog('open');
    });
})

Your html now becomes, note that there is no onclick="" on the button.

<button type="button" id="showInfos">test</button>
    <div id="infoDialog" title="Eventinfos">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
      </p>
    </div>

Fiddle: https://jsfiddle.net/4hxd5tLL/1/

Upvotes: 2

Related Questions