Skip to content

Instantly share code, notes, and snippets.

@scripting

scripting/aboutdialog.html

Last active September 14, 2015 02:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save scripting/a8a867248b08ca93a46c to your computer and use it in GitHub Desktop.
Save scripting/a8a867248b08ca93a46c to your computer and use it in GitHub Desktop.
Download ZIP
Example source for the About dialog for a river of news page.
Raw
aboutdialog.html
<html>
<head>
<title>aboutdialog test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://fargo.io/code/jquery-1.9.1.min.js"></script>
<link href="http://fargo.io/code/bootstrap.css" rel="stylesheet">
<script src="http://fargo.io/code/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://fargo.io/code/fontAwesome/css/font-awesome.min.css"/>
<link href="http://fargo.io/code/ubuntuFont.css" rel="stylesheet" type="text/css">
<script>
function openAbout () {
$("#idAboutDialog").modal ("show");
}
</script>
<style>
body {
font-family: Ubuntu;
font-size: 18px;
background-color: whitesmoke;
}
.divPageBody {
width: 60%;
margin-top: 90px;
margin-left: auto;
margin-right: auto;
}
.divClickHere {
font-family: "Ubuntu";
font-size: 24px;
}
.divClickHere a {
cursor: pointer;
}
.divAboutDialog p {
font-family: Georgia;
font-size: 18px;
line-height: 140%;
padding-top: 12px;
}
.divAboutDialog .modal.fade.in {
top: 10%;
}
.divAboutDialog .modal {
width: 650px;
left: 45%;
}
.divAboutDialog .modal-body {
padding: 0;
max-height: none;
}
.divAboutDialog .btn {
width: 80px;
margin-left: 5px;
}
.divAboutBodyText {
margin-left: 17px;
margin-right: 20px;
margin-top: 5px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="divAboutDialog">
<div id="idAboutDialog" class="modal hide fade">
<div class="modal-header">
<a href="#" class="close" data-dismiss="modal">&times;</a>
<h3 id="prompt">About the NY Mets, by Bull Mancuso...</h3>
</div>
<div class="modal-body">
<div class="divAboutBodyText">
<p><img src="http://scripting.com/2015/09/13/metsLogo.png" width="85" height="85" border="0" style="float: right; padding-left: 25px; padding-bottom: 10px; padding-top: 10px; padding-right: 15px;" alt="A picture named metsLogo.png">The New York Mets are an American professional baseball team based in the New York City borough of Queens. They play in Major League Baseball's National League (NL) East Division. They are one of two MLB clubs based in New York City, the other club being the New York Yankees. </p>
<p>One of baseball's first expansion teams, the Mets were founded in 1962 to replace New York's departed National League teams: the New York Giants and Brooklyn Dodgers. The Mets' colors are composed of the Giants' orange and Dodgers' blue (which also comprise the outer two bands of the New York City Flag).<p>
</div>
</div>
<div class="modal-footer">
<a href="https://en.wikipedia.org/wiki/New_York_Mets" class="btn" style="float: left;">More Info</a>
<a href="#" class="btn btn-primary" onclick="$('#idAboutDialog').modal ('hide');">OK</a>
</div>
</div>
</div>
<div class="divPageBody">
<div class="divClickHere">Click <a onclick="openAbout ()">here</a> to open the about dialog.</div>
</div>
</body>
</html>
@scripting
Copy link
Author

You can try this out here:

http://fargo.io/code/testing/aboutdialog.html

Questions, comments on the River4 mail list on Google Groups.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment