# Page Modal

## Page Modal

XE.page의 기능을 사용하기 위해서는 **xe-page.js**파일을 로드하여야 합니다.

```php
//blade파일(php)에서 로드할 경우
{{ XeFrontend::js('assets/core/xe-ui-component/js/xe-page.js')->load() }}
```

### XE.pageModal(url, options, callback)

xeModal을 실행하여 html을 해당 modal영역에 랜더링합니다. response로 html 및 js, css파일들의 경로를 전달 받습니다.

#### 동작 순서

1. js, css파일 로드
2. html로드
3. callback 실행
4. xeModal 실행

#### arguments

* url (string)
  * ajax가 호출될 url
* options (object)
  * data (object) 전송 파라미터
  * type (string) http method 'get'|'post'
* callback (function)
  * html append이후에 실행될 callback

### DOM Element `data-*` attruibute를 이용한 XE.pageModal 사용 방법

xe.page.js파일을 로드하면 `data-toggle="xe-page-modal"` attribute를 사용한 DOM에 click이벤트를 바인딩 합니다.

* `assets/core/common/xe.page.js`의 파일을 로드합니다.
* 클릭되는 DOM에 `data-toggle='xe-page-modal'` attribute를 명시하여야 합니다.
* href or data-url에 ajax를 요청할 url정보를 명시합니다.
* data-callback으로 callback명을 명시합니다.
* data-params로 요청시 전송할 파라미터 정보를 명시합니다. (JSON string)

```markup
<a href="api/test" 
    data-toggle="xe-page-modal" 
    data-params="{'param1':'value1'}" 
    data-callback="callbackFunc">[XE.pageModal 실행]</a>
```

Controller 예시

```
class ExampleController extends Controller
{
    public function exampleReturnPopup()
    {
        //api_render 헬퍼 함수의 인자로 blade 파일의 경로를 지정하면 팝업으로 띄울 수 있도록 변환해줍니다. 
        return api_render('example_blade');
    }
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xpressengine.gitbook.io/xpressengine-manual/js/page-modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.