How to open Custom pop on click of Button?

Question

I am having a scenario when I am clicking on a button then one pop-up must be opened asking "Do you want to perform this operation". There are two button OK and Cancel. And on pressing any of there button control must go i controller and do required task.

After doing google, I find one way using windows.open but i cannot apply my css on this and there is no particular url for this. So this did not worked.

I have tried that when the page load a div having this data should hide and after clicking it must shown but this is not giving felling of popup.

<body onload="hide()">
    <center>
        <script>
            function hide() {
                document.getElementById("show").style.visibility = "hidden";
            }

            function show() {
                document.getElementById("show").style.visibility = "visible";
            }
        </script>
        <div id="form">
            <form method="get">
                <div id="show">Demo</div>
                <table>

                    <tr>
                        <td></td>
                        <td><a id="dialog-link" href="">
                            <button type="button" value="Show Pop up"
                                    onclick="show()">Click</button>
                        </a></td>
                    </tr>
                </table>
            </form>
        </div>
    </center>
</body>

In a nutshell, you want to open something like bootstrap modal window with some information yes? — Beri, Dec 08 '14 at 08:32
Please remove the Java tag since JavaScript has absolutely nothing to do with Java. — Phiwa, Dec 08 '14 at 08:36
What modern tutorial told you to use a `` tag? I want to know so I can strangle them. — Chris Martin, Dec 08 '14 at 08:40

score 0 · Answer 1 · edited May 23 '17 at 12:27

My guess: 1. Add style "display:none", that will hide your element in DOM. 2. Change that attribute using JS.

<body onload="hide()">
    <center>
        <script>
            function hide() {
            document.getElementById("show").style.display = 'none';
            }

            function show() {
                document.getElementById("show").style.display = 'block';
                            }
        </script>
        <div id="form">
            <form method="get">
                <div id="show" style="display: none;">Demo</div>
                <table>
                     <tr>
                        <td></td>
                        <td><a id="dialog-link" href=""><button type="button"
                                    value="Show Pop up" onclick="show()">Click</button></a></td>
                    </tr>
                </table>
            </form>
        </div>
    </center>
</body>

Here is a similar topic: javascript hide/show element

If you want something more than a confirm modal, something with more css, I would go into bootstrap, because creating a modal window from scratch can be sometimes hard, and bootstrap gives you free API for that. But it will require jQuery in your app.

But if you want this element to behave like a confirm popup, alert or bootstrap modal, you need to work on your css. My snipplet will simple show/hide an element, but it has no css classes:) — Beri, Dec 08 '14 at 08:38
When i am making same application for modal box then it is working but when i am merging this logic with my existing code then it is falling. Any other way — OPTIMUS, Dec 08 '14 at 10:08

Suchit kumar · Answer 2 · 2014-12-08T08:43:12.007

0

i think you need confirmation box:

     function show() {
 confirm("do your operation!");
}

edited Dec 08 '14 at 08:43

answered Dec 08 '14 at 08:37

Suchit kumar

11,809
3
22
44

No i want customized dialog box – OPTIMUS Dec 08 '14 at 10:08
visit here:http://www.dynamicdrive.com/forums/showthread.php?75527-Creating-a-custom-prompt-dialog-box-to-retrieve-value-of-text-field-amp-store-as-a-var – Suchit kumar Dec 08 '14 at 10:12

How to open Custom pop on click of Button?

2 Answers2