How to display Custom Dialog box on button click

Question

I want my custom dialog box to load on button click but that's not happening.I am using the dialog box on this webpage.

here is my code..

      function click(){
      $(function() {
           $( "#dialog" ).dialog({
            width : 250,
            height: 180,
            modal : true
            });
            });
           }


     <div>
    <button type="button" id="put" onclick="click()">Insert data</button>
     </div>

The above code is not working..Please help...

No i am not getting any errors on my console.The dialog box is getting loaded on page load instead of button click. — Lucy
– Lucy, Commented Apr 25, 2013 at 3:20

Bakhtiiar Muzakparov · Accepted Answer · 2018-01-09 10:14:02Z

6

It works fine there is prooflink
HTML:

<div id="dialog">
      <p>THIS IS DIALOG!!!</p>
    </div>

    <button id="opener">Open Dialog</button>

And Jquery:

$(function() {
    $( "#dialog" ).dialog({
      autoOpen: false
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });

edited Jan 9, 2018 at 10:14

Bakhtiiar Muzakparov

2,4482 gold badges17 silver badges24 bronze badges

answered Apr 24, 2013 at 15:47

Roar

2,1574 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucy Over a year ago

tried this piece of code..when the page gets loaded all the contents of id dialog are displayed below the button as though the dialog box was never created.

Roar Over a year ago

@Lucy have u tied to see what's happen in console?

chead23 · Accepted Answer · 2013-04-24 21:43:50Z

0

The selector is trying to find an element with the id dialog but it looks like you don't have one. Try this:

Javascript:

$(document).ready(function ()
{
    function click()
    {
        $('#dialog').dialog({
            autoOpen: false,
            width: 250,
            height: 180,
            modal : true
        });
    }
});

HTML:

 <div id="dialog">
       Your dialog message.
    </div>

    <button type="button" id="put" onclick="click()">Insert data</button>

edited Apr 24, 2013 at 21:43

answered Apr 24, 2013 at 15:49

chead23

1,87911 silver badges12 bronze badges

4 Comments

Lucy Over a year ago

I have included div with id dialog just like in the code given in the hyperlink above but it's still not working.

chead23 Over a year ago

You might want to add the code in the document.ready handler. I have edited the above.

Lucy Over a year ago

Tried the above edited code but it's still not working.The content of the div is getting displayed below the button without any css styling as though the dialog box was never created.

chead23 Over a year ago

Try including the link to the CSS file for jquery-ui.

Baby Groot · Accepted Answer · 2014-01-20 06:10:20Z

0

function click(){
       $( "#dialog" ).dialog({
        width : 250,
        height: 180,
        modal : true
        });
}

edited Jan 20, 2014 at 6:10

Baby Groot

4,27939 gold badges55 silver badges70 bronze badges

answered Jan 20, 2014 at 5:47

Ramu

291 silver badge6 bronze badges

Comments

The Hungry Dictator · Accepted Answer · 2014-03-14 06:31:28Z

I am using jquery-2.1.0.min.js and jquery.ui-1.10.4.

Here is my full source code:

(For the jquery-ui.css link tag, change: href="path_to_your_jquery-ui/themes/base/jquery-ui.css")

(For the jquery script tag, change: src="path_to_your_jquery/jquery-2.1.0.min.js")

(For the jquery-ui script tag, change: src="path_to_your_jquery-ui/ui/jquery-ui.js")

(For your demos.css link tag, change: href="path_to_your_jquery-ui/demos/demos.css")

<!DOCTYPE html>

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="add-ons/jui/themes/base/jquery-ui.css"/>
    <script src="add-ons/jquery-2.1.0.min.js"></script>
    <script src="add-ons/jui/ui/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="add-ons/jui/demos/demos.css"/>
    <!-- this in-file styling is used to hide the #dialog element initially -->
    <style>
      #dialog {
        display: none;
      }
    </style>
    <script> 
      $(document).ready(function() {
        $("#put").on("click", function(evnt) {
          $(function() {
            $("#dialog").dialog({
              width:250,
              height: 180,
              modal:true
            });
          });
          evnt.preventDefault();
        });        
      });
    </script>
  </head>
  <body>
    <div id="dialog" title="Basic dialog">
      <p>
        This is the default dialog which is useful for displaying information. 
        The dialog window can be moved, resized and closed with the 'x' icon.
      </p>
    </div>
    <div>
      <button type="button" id="put">Insert data</button>
    </div>
  </body>
</html>

Be sure to pass an event parameter to your callback function in your 'on click' function and call the preventDefault() method on it. Read more about event.preventDefault() Also, here's an good read on event.preventDefault() vs. return false

user8547045 · Accepted Answer · 2017-09-01 08:10:02Z

<html>
<head>
<style>
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
.button11
{
    background: #47bb7c;
    border-radius: 2px;
    border-bottom: solid 2px #489368;
    border-left: 0 none;
    border-right: 0 none;
    border-top: 0 none;
    padding: 4px 8px;
    color: #fff;
    font-size: 13px;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <center>
    <p>Green Card</p>
   <input type="button" class="button11" name="submit" id="submit" value="Print"/>
  <center>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

Collectives™ on Stack Overflow

How to display Custom Dialog box on button click

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related