Сделать диалоговое окно всплывающим при запуске события

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>