Закрепление загрузки внешнего html в диалоговом окне jquery

Вот некоторые из кода, который у меня есть.

function addLoad(){

 //$("#dialog-modal")load('truckload.html').dialog({modal:true});
 $("#dialog-modal").dialog(
 {
 width: 600,
 height: 400,

 open: function(event, ui)
 {
 $(this).load('truckload.html');
 //$("#dialog-modal").load(url).dialog({modal:true});
 var textarea = $('<textarea>');
 $(textarea).redactor({
 focus: true,
 autoresize: false,

 initCallback: function()
 {
 this.set('<p>Lorem...</p>');
 }

 });
 }
 });
 }

</script>
<div id="dialog-modal" title="Add Information to calendar" style="display: none;"></div>
</code>

AddLoad вызывается кнопкой, а truckload.html - это файл, включенный в мой проект сценария google. Все прокомментированные строки - это разные способы, с помощью которых я попытался выполнить эту работу.

Моя цель состоит в том, что при вызове addLoad открывается диалоговое окно и отображает информацию о странице грузовика. Что я делаю не так? Возможно ли это?

Любая помощь будет принята с благодарностью!

Благодаря,

Loren

2 ответа

Если вы пытаетесь вызвать это из HtmlService, это будет выглядеть примерно так:

Файл Code.gs

// render initial html page
function doGet(event){
 return HtmlService.createTemplateFromFile('index').evaluate(); 
}

// call from click on page (or if using UiApp)
function addLoad(){
 try{
 // get the html content from the truckload.html page and return it to the showModal function
 return HtmlService.createHtmlOutputFromFile('truckload').getContent();
 }catch(err){
 Logger.log(err.lineNumber + ' - ' + err);
 }
}

Файл index.html

<div id="popup">
Click Me
</div>

Наконец, файл truckload.html (любой html, который вы хотите отобразить)

здесь грубый пример:

Грузовик модальный


сначала создайте всплывающее окно, затем вызовите всплывающее окно по ссылке или кнопке. см. эту скрипку:

Убедитесь, что у вас есть правильные ресурсы jquery:

Код JS

var webPage = "http://www.cbc.ca";

 var $dialog = $('')
 .html('')
 .dialog({
 autoOpen: false,
 modal: true,
 height: 650,
 width: 600,
 title: "Add Information to calendar"
 });
 $("#popup").on("click", function(){
 $dialog.dialog('open');
 });

licensed under cc by-sa 3.0 with attribution.