I want to add a pop up modal box

Question

I want to add a modal pop up on Valley of flowers . My site is designed in wordpress. I want to add this pop up to homepage of my site. This Pop up should appear only once to a user.

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    }
});

</script>
<style>
body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }

.ui-dialog-osx {
    -moz-border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
}
</style></head>
<body>
<p>Hello World!
</p>

<div id="dialog-message" title="Important information">
    <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
    <div style="margin-left: 23px;">
        <p>
           Some Content

        </p></div>
</div>
</body>
</html>

Answer 1

Add required styles and Javascript files and put the dialog initialization code inside Documnt ready event.Check jquery example

<html>
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
    $(document).ready(function() {
    $("#dialog-message").dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "I've read and understand this": function() {
                $(this).dialog("close");
            }
        }
    });
    });

    </script>
    <style>
    body { font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif; }

    .ui-dialog-osx {
        -moz-border-radius: 0 0 8px 8px;
        -webkit-border-radius: 0 0 8px 8px;
        border-radius: 0 0 8px 8px; border-width: 0 8px 8px 8px;
    }
    </style></head>
    <body>
    <p>Hello World!
    </p>

    <div id="dialog-message" title="Important information">
        <span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
        <div style="margin-left: 23px;">
            <p>
               Some Content

            </p></div>
    </div>
    </body>
    </html>

I want to add a pop up modal box

Question

1 answers

solution1
0 2014-12-11 10:36:04

I want to add a pop up modal box

Question

1 answers

solution1 0 2014-12-11 10:36:04

solution1
0 2014-12-11 10:36:04