问答详情
源自:3-6 对话框插件——dialog

jq- dialog()??

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>对话框插件</title>

    <style type="text/css">

        body

        {

            font-size: 62.5%;

        }

        #divtest

        {

            width: 282px;

        }

        #divtest .content

        {

            background-color: #eee;

            padding: 8px;

            height: 23px;

            line-height: 23px;

        }

        .fl

        {

            float: left;

        }

        .fr

        {

            float: right;

        }


    </style>

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script src="https://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script>

</head>


<body>

<div id="divtest">

    <div class="content">

        <span id="spnName" class="fl">张三</span>

        <input id="btnDelete" type="button" value="删除"  class="fr"/>

    </div>

    <div id='dialog-modal'></div>

</div>


<script type="text/javascript">

    $(function () {

        $("#btnDelete").bind("click", function () { //询问按钮事件

            if ($("#spnName").html() != null) { //如果对象不为空

                sys_Confirm("您真的要删除该条记录吗?");

                return false;

            }

        });

    });

    function sys_Confirm(content) { //弹出询问信息窗口

        $("#dialog-modal").dialog({

            height: 140,

            modal: true,

            title: '系统提示',

            hide: 'slide',

            buttons: {

                '确定': function () {

                    $("#spnName").remove();

                    $(this).dialog("close");

                },

                '取消': function () {

                    $(this).dialog("close");

                }

            },

            open: function (event, ui) {

                $(this).html("");

                $(this).append("<p>" + content +"aa"+ "</p>");

            }

        });

    }

</script>

</body>

</html>


提问者:web_東 2018-04-24 07:44

个回答

  • 乏心
    2018-07-14 01:00:28

    通过点击事件将一个普通的div变为弹窗提示