Locally creating a modal box & loading another page inside it
I would like to begin by saying my JavaScript knowledge is basically none existent but I know a few other languages so feel free to simply point me in the right direction rather than explaining it, although the latter would be useful.
I have two questions:
1. Creating a modal box from HTML stored in a javascript variable
2. Pull content from another page using a custom URL each time (An int is scraped from the page and added to the end of the URL)
I have figured out how to create a modal box if the HTML code is stored on something such as pastebin but cannot seem to figure out how to do it locally, the working URL way is:
<a href="/URL WITH HTML CODE HERE" rel="modal:open" title="TITLE">TITLE</a>
I now have my HTML code stored in a variable which is what I want to use.
For my second question I pull an integer off the page, lets say 10 and then need this integer added to the end of a URL, I would then like to take a specific div on the page and populate the modal box which I have created above with the div. If this isn't possible I'll settle for just knowing how to redirect as what i've tired simply puts the JavaScript variable name at the end of the URL not the content of it.
var UID = document.querySelector('#inner-container > table > tbody > tr >
td:nth-child(1) > table > tbody > tr:nth-child(3) > td > span').innerText;
var htmlTEST = '<div class="modal" id="testingHTML">' + '<table
class="tborder">' + '<tr><td class="thead">' + '<h2 style="margin: 0;">How
to:</h2>' + '</td></tr>' + ' <input type="text" class="textbox"
name="comments" size="35" maxlength="250" value="" style="width: 95%">' + '
</table> </div';
ButtonStuff();
function ButtonStuff() {
$(".profile-btns").append(`
<a style=“width: 200px;
length: 450px;
color: #fff!important;
box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
class="button">Likes Received</a>`
);
}
The above code simply creates the button I would like all this to operate from, plus my HTML code and the selector for the integer on the page needed for the URL.
My ideal outcome would be getting a div from another page (the one I use the int for) and have it appear in the modal box without the page redirecting.
javascript
asked Dec 27 '18 at 18:19
Royals HF
6817
add a comment |
I would like to begin by saying my JavaScript knowledge is basically none existent but I know a few other languages so feel free to simply point me in the right direction rather than explaining it, although the latter would be useful.
I have two questions:
1. Creating a modal box from HTML stored in a javascript variable
2. Pull content from another page using a custom URL each time (An int is scraped from the page and added to the end of the URL)
I have figured out how to create a modal box if the HTML code is stored on something such as pastebin but cannot seem to figure out how to do it locally, the working URL way is:
<a href="/URL WITH HTML CODE HERE" rel="modal:open" title="TITLE">TITLE</a>
I now have my HTML code stored in a variable which is what I want to use.
For my second question I pull an integer off the page, lets say 10 and then need this integer added to the end of a URL, I would then like to take a specific div on the page and populate the modal box which I have created above with the div. If this isn't possible I'll settle for just knowing how to redirect as what i've tired simply puts the JavaScript variable name at the end of the URL not the content of it.
var UID = document.querySelector('#inner-container > table > tbody > tr >
td:nth-child(1) > table > tbody > tr:nth-child(3) > td > span').innerText;
var htmlTEST = '<div class="modal" id="testingHTML">' + '<table
class="tborder">' + '<tr><td class="thead">' + '<h2 style="margin: 0;">How
to:</h2>' + '</td></tr>' + ' <input type="text" class="textbox"
name="comments" size="35" maxlength="250" value="" style="width: 95%">' + '
</table> </div';
ButtonStuff();
function ButtonStuff() {
$(".profile-btns").append(`
<a style=“width: 200px;
length: 450px;
color: #fff!important;
box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
class="button">Likes Received</a>`
);
}
The above code simply creates the button I would like all this to operate from, plus my HTML code and the selector for the integer on the page needed for the URL.
My ideal outcome would be getting a div from another page (the one I use the int for) and have it appear in the modal box without the page redirecting.
javascript
asked Dec 27 '18 at 18:19
Royals HF
6817
add a comment |
I would like to begin by saying my JavaScript knowledge is basically none existent but I know a few other languages so feel free to simply point me in the right direction rather than explaining it, although the latter would be useful.
I have two questions:
1. Creating a modal box from HTML stored in a javascript variable
2. Pull content from another page using a custom URL each time (An int is scraped from the page and added to the end of the URL)
I have figured out how to create a modal box if the HTML code is stored on something such as pastebin but cannot seem to figure out how to do it locally, the working URL way is:
<a href="/URL WITH HTML CODE HERE" rel="modal:open" title="TITLE">TITLE</a>
I now have my HTML code stored in a variable which is what I want to use.
For my second question I pull an integer off the page, lets say 10 and then need this integer added to the end of a URL, I would then like to take a specific div on the page and populate the modal box which I have created above with the div. If this isn't possible I'll settle for just knowing how to redirect as what i've tired simply puts the JavaScript variable name at the end of the URL not the content of it.
var UID = document.querySelector('#inner-container > table > tbody > tr >
td:nth-child(1) > table > tbody > tr:nth-child(3) > td > span').innerText;
var htmlTEST = '<div class="modal" id="testingHTML">' + '<table
class="tborder">' + '<tr><td class="thead">' + '<h2 style="margin: 0;">How
to:</h2>' + '</td></tr>' + ' <input type="text" class="textbox"
name="comments" size="35" maxlength="250" value="" style="width: 95%">' + '
</table> </div';
ButtonStuff();
function ButtonStuff() {
$(".profile-btns").append(`
<a style=“width: 200px;
length: 450px;
color: #fff!important;
box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
class="button">Likes Received</a>`
);
}
The above code simply creates the button I would like all this to operate from, plus my HTML code and the selector for the integer on the page needed for the URL.
My ideal outcome would be getting a div from another page (the one I use the int for) and have it appear in the modal box without the page redirecting.
javascript
asked Dec 27 '18 at 18:19
Royals HF
6817
I would like to begin by saying my JavaScript knowledge is basically none existent but I know a few other languages so feel free to simply point me in the right direction rather than explaining it, although the latter would be useful.
I have two questions:
1. Creating a modal box from HTML stored in a javascript variable
2. Pull content from another page using a custom URL each time (An int is scraped from the page and added to the end of the URL)
I have figured out how to create a modal box if the HTML code is stored on something such as pastebin but cannot seem to figure out how to do it locally, the working URL way is:
<a href="/URL WITH HTML CODE HERE" rel="modal:open" title="TITLE">TITLE</a>
I now have my HTML code stored in a variable which is what I want to use.
For my second question I pull an integer off the page, lets say 10 and then need this integer added to the end of a URL, I would then like to take a specific div on the page and populate the modal box which I have created above with the div. If this isn't possible I'll settle for just knowing how to redirect as what i've tired simply puts the JavaScript variable name at the end of the URL not the content of it.
var UID = document.querySelector('#inner-container > table > tbody > tr >
td:nth-child(1) > table > tbody > tr:nth-child(3) > td > span').innerText;
var htmlTEST = '<div class="modal" id="testingHTML">' + '<table
class="tborder">' + '<tr><td class="thead">' + '<h2 style="margin: 0;">How
to:</h2>' + '</td></tr>' + ' <input type="text" class="textbox"
name="comments" size="35" maxlength="250" value="" style="width: 95%">' + '
</table> </div';
ButtonStuff();
function ButtonStuff() {
$(".profile-btns").append(`
<a style=“width: 200px;
length: 450px;
color: #fff!important;
box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12);
class="button">Likes Received</a>`
);
}
The above code simply creates the button I would like all this to operate from, plus my HTML code and the selector for the integer on the page needed for the URL.
My ideal outcome would be getting a div from another page (the one I use the int for) and have it appear in the modal box without the page redirecting.
javascript
javascript
asked Dec 27 '18 at 18:19
Royals HF
6817
asked Dec 27 '18 at 18:19
Royals HF
6817
asked Dec 27 '18 at 18:19
Royals HF
6817
asked Dec 27 '18 at 18:19
Royals HF
6817
asked Dec 27 '18 at 18:19
Royals HF
6817
6817
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53949225%2flocally-creating-a-modal-box-loading-another-page-inside-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53949225%2flocally-creating-a-modal-box-loading-another-page-inside-it%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
