How to open a popup window in javascript using onclick?

Question

How can I display the popup below using the onclick method in JavaScript with a button?

 <div data-role="popup" id="myPopupDialog4">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>

    <div data-role="header">
       <h4>Post Update </h4>
    </div>

    <div data-role="main" class="ui-content">
             <pre><B>
             <div id="resultDayOfWeek"></div>
             <div id="resultNum"></div>
             <div id="resultDir"></div>
             <div id="resultStop"></div>
             <div id="resultTime"></div>     
             </B> 
             </pre>
    <fieldset data-role="controlgroup">
        <legend>Choose Status</legend>

       <label for="Arrived/Left">Arrived/Left</label>
       <input type="radio" name="status" id="Arrived/Left" value="Arrived/Left">
       <label for="Delayed">Delayed</label>
       <input type="radio" name="status" id="Delayed" value="Delayed">  
       <label for="Canceled">Canceled</label>
       <input type="radio" name="status" id="Canceled" value="Canceled">
       <label for="getupdate">getupdate from others</label>
       <input type="radio" name="status" id="getupdate" value="getupdate">
       <label for="Other">Other</label>
       <input type="radio" name="status" id="Other" value="Other">
       </fieldset>

       <textarea name="addinfo" id="info"> Comments goes here.... </textarea>
       <input type="submit"  value="Submit" onclick="postSubmit();">  
       <div id="poststatus"></div>   
    </div>  

    <div data-role="footer" >
       <h1>Footer Text</h1>
    </div>

 </div>

Why do you mention jQuery in your title, but ask for JavaScript in your post? You don't need jQuery at all for this. — Code Maverick
– Code Maverick, Commented Mar 10, 2014 at 17:03

Oriol · Accepted Answer · 2014-03-10 16:55:50Z

2

Just use window.open:

var referenceToNewWindow = window.open(url, name, features);

answered Mar 10, 2014 at 16:55

Oriol

291k71 gold badges459 silver badges535 bronze badges

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

Comments

Below the Radar · Accepted Answer · 2014-03-10 16:55:47Z

0

function popup(mylink, windowname, w, h){
    if (! window.focus)return true;
    var href;
    if (typeof(mylink) == 'string')
       href=mylink;
    else
       href=mylink.href;
    window.open(href, windowname, "width="+w+",height="+h+",scrollbars=yes,toolbar=no" );
    return false;
}

 <a href="http://www.example.com"  onClick="return popup(this, 'Title', '400', '500')">Link</a>

answered Mar 10, 2014 at 16:55

Below the Radar

7,65511 gold badges70 silver badges146 bronze badges

1 Comment

cr0 Over a year ago

where's popup defined?

user2273344 · Accepted Answer · 2014-03-10 17:48:23Z

0

Use This

<a href="" onClick="return popitup('http://www.abc.com/youpage')">Click Me</a>

Add following javascript script:

   <script>
   function popitup(url) 
   {
    newwindow=window.open(url,'name','height=300,width=650,screenX=400,screenY=350');
    if (window.focus) {newwindow.focus()}
    return false;
   }
   </script>

answered Mar 10, 2014 at 17:48

user2273344

Comments

R J · Accepted Answer · 2020-01-02 06:15:11Z

0

Stack Overflow Here is one exampe. check this

The javascript is below

<script>
        function openPopup() {
            document.getElementById("boxPopup").style.display = "block";
        }

        function closePopup() {
            document.getElementById("boxPopup").style.display = "none";
        }
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            var modal = document.getElementById('boxPopup');
            if (event.target == modal) {
                closePopup();
            }
        }

    </script>

answered Jan 2, 2020 at 6:15

R J

5233 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to open a popup window in javascript using onclick?

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related