简体   繁体   中英

jquery Ui dialog need to change the button click event

i am using jquery UI to create a popup window as an alert message and i need t make the ok button when it is clicked to call and get another page can anyone help me ????

this is the code

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Modal message</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <!--<link rel="stylesheet" href="/resources/demos/style.css" />!-->

        <script>
            $(function() {
                $("#dialog-message").dialog({
                    modal : true,
                    buttons : {
                        enter : function() {
                            $(this).dialog("close");
                        }
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dialog-message" title="WIN  PRICES" style="width:300px; height:150px;">
            <p>
                <!--<span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>!-->
                <span style ="float: left; margin:0 7px 50px 0;"><img src="b4l.jpg" width="77" height="53"></span>
                <h3>byu for less</h3>
                Shoping online <b>Need No Password</b>
                <br>
                Get your needs is our job.
            </p>
            <p>
                <b>every week win a price</b>.
            </p>
        </div>
        <p>
            Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
        </p>
    </body>
</html>

You can create a custom alert box in order to customize it to suit your needs.

Have a look here as this will help you choose what is better for you.

PS: you can try the below as well.

HTML

<input type="button" onclick="confirmation()" value="Want to go to google?">

JS

function confirmation() {
    var answer = confirm("Want to go to google?");
    if (answer){
        alert("Bye bye!");
        window.location = "http://www.google.com/";
    }
    else{
        alert("Thanks for sticking around!");
    }
}

Unsure what you mean by "call and get another page" -- would this work?

Working jsFiddle here

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <script type="text/javascript">
            $(document).ready(function() {

                $( "#dialog-message" ).dialog({
                    modal: true,
                    buttons: {
                        enter: function() {
                            $( this ).dialog( "close" );
                            window.location.href='http://google.com';
                        }
                    }
                });

            }); //END $(document).ready()

        </script>
    </head>
<body>

    <div id="dialog-message">
        <h1>Example Dialog</h1>
        <img src="http://placehold.it/150x150" width="150" height="150"/>
        First Name: <input type="text" id="fname"><br />
        Last Name: <input type="text" id="lname"><br />
    </div>

</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM