Is there a way to open a jquery dialog box without getting the text from a div, but rather from text in a javascript variable?
1 Answer
You can create and append a <div> element from a javascript variable and then turn it into a dialog using something like this:
var dialog = "<div id=dialog <h1>Some text</h1></div>";
$('body').append(dialog);
$('#dialog').dialog();
var dialog = "<div id=dialog <h1>Some text</h1></div>";
$('body').append(dialog);
$('#dialog').dialog();<head>
<title>jQuery UI Dialog - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
</head>
<body>
</body>You can automate this with a function:
var createDialog = function(text , title) {
var dialog = "<div id=dialog <h1>" + text + "</h1></div>";
$('body').append(dialog);
$('#dialog').prop('title' , title);
$('#dialog').dialog();
}
Just call the function passing your variables in as arguments and you get your dialog.
// initialize title and body variables
var someVariable = "Some text";
var someTitle = "My title";
var createDialog = function(text , title) {
//create dialog <div> shell
var dialog = "<div id=dialog <h1>" + text + "</h1></div>";
// create the dialog <div>
$('body').append(dialog);
// update the <div>'s title
$('#dialog').prop('title' , title);
//create the dialog
$('#dialog').dialog();
}
createDialog(someVariable , someTitle);<head>
<title>jQuery UI Dialog - Default functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</head>
<body>
</body>
var.