我想添加一个弹出模式框

Question

I want to add a modal pop up on Valley of flowers . 我想在花谷上添加一个模式弹出窗口。 My site is designed in wordpress. 我的网站是在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 添加所需的样式和JavaScript文件，并把对话初始化代码Documnt准备event.Check内jQuery的例子

<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>

我想添加一个弹出模式框

问题描述

1 个解决方案

解决方案1
0 2014-12-11 10:36:04

我想添加一个弹出模式框

问题描述

1 个解决方案

解决方案1 0 2014-12-11 10:36:04

解决方案1
0 2014-12-11 10:36:04