Basically dialog box needs to show important information to user at blog websites front side. For blogger websites no additional plugin to show auto open dialog box at particular location.
For auto open dialog box to blogger websites, just show with normal html code, JavaScript code and jQuery code.
Normally dialog box display at different positions as
- Auto Open dialog box exactly display center position
- Auto open dialog box at Left top position
- Auto open dialog box at Right top position
- Auto open dialog box at Left bottom position
- Auto open dialog box at Right bottom position
Html Code for auto open dialog box
See below code , just use <div> tag and also insert What ever information you want that place between <div> and </div> tags.
<div id="my_dialog" title="Alert for you dialog"> <p>Welcome to bestvwant.org website and show more infomation</p> <p>Please contact</p> </div>In the above code Change red color code to your requirement.
JavaScript Code for auto open dialog box
The following JavaScript code insert at <head> section. This code completely free to use.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> <link href='https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css' rel='stylesheet' />Next following code as jQuery Code, that shows different position you want.
Auto Open dialog box exactly display center position
<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: true,
modal: true,
width: 300,
height: 150,
position: { my: "center center", at: "center center", of: window }
});
});
})
Auto Open dialog box display Left Top position
<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: true,
modal: true,
width: 300,
height: 150,
position: { my: "left top", at: "left top", of: window }
});
});
})
Auto Open dialog box display Right Top position
<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: true,
modal: true,
width: 300,
height: 150,
position: { my: "right top", at: "right top", of: window }
});
});
})
Auto Open dialog box display Left Bottom position
<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: true,
modal: true,
width: 300,
height: 150,
position: { my: "left bottom", at: "left bottom", of: window }
});
});
})
Auto Open dialog box display Right Bottom position
<script>
$(document).ready(function() {
$(function() {
$( "#my_dialog" ).dialog({
autoOpen: true,
modal: true,
width: 300,
height: 150,
position: { my: "right bottom", at: "right bottom", of: window }
});
});
})
Above code use just below of html code, it just auto open any dialog box information.
0 Comments:
Post a Comment