触发事件时弹出一个对话框

Question

我想使用jquery或javascript创建一个对话框，它应该有两个按钮一个文本行和右上角的取消按钮。

该框应如下所示，但它从我们桌面的右下方弹出。

帮我编写代码或建议任何有用的链接。

Answer 1

您可以使用Jquery UI

请尝试此示例

http://jsfiddle.net/db5SX/9284/

$("#showPopUp").click(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");
        }
    }
});


})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>



 <link href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">
 
<p>Hello World!
</p>

<button id="showPopUp">
Open Popup
</button>
</button>

<div id="dialog-message" title="Important information" style="display:none">
    <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>
           SAMPLE SAMPLE
        </p></div>
</div>