Copy URL to Clipboard
### ✅ Basic Example (Copy current page URL):
function copyCurrentUrlToClipboard() {
const url = window.location.href;
navigator.clipboard.writeText(url)
.then(() => {
alert("URL copied to clipboard!");
})
.catch(err => {
console.error("Failed to copy: ", err);
});
}### ✅ If you want to copy a custom URL from an input field:
<input type="text" id="feedUrl" value="https://example.com/feed/123" readonly>
<button onclick="copyFeedUrl()">Copy Feed URL</button>
<script>
function copyFeedUrl() {
const copyText = document.getElementById("feedUrl");
navigator.clipboard.writeText(copyText.value)
.then(() => {
alert("Feed URL copied!");
})
.catch(err => {
console.error("Error copying to clipboard:", err);
});
}
</script>Let me know if you want to show a tooltip or a styled notification instead of `alert()`.
—
### ✅ 1. **Use `data-dialog` Attributes**
Here's a simple button that opens a dialog:
<button
class="btn btn-primary"
data-dialog="my-custom-dialog"
data-dialog-title="My Custom Modal"
data-dialog-width="500"
data-dialog-height="300"
data-dialog-modal="true"
data-dialog-url="<?= $view->action('load_dialog_content') ?>"
>
Open Dialog
</button>—
### ✅ 2. **Create the Controller Action**
In your custom package controller or a specific block/controller, add the method:
public function load_dialog_content()
{
$this->set('title', 'Hello from the dialog!');
$this->render('/dialogs/my_custom_dialog');
}This will look for the view in:
`packages/your_package_name/single_pages/dialogs/my_custom_dialog.php`
—
### ✅ 3. **Create the Dialog View File**
Example: `packages/your_package_name/single_pages/dialogs/my_custom_dialog.php`
defined('C5_EXECUTE') or die("Access Denied.");
?>
<div class="ccm-ui">
<h4><?= $title ?></h4>
<p>This is the content of your custom dialog.</p>
</div>Use the `ccm-ui` class to match Concrete CMS styling inside modals.
—
### ✅ 4. **Ensure Assets Are Loaded**
Concrete’s core handles dialogs automatically. But make sure your view includes:
use ConcreteCoreViewView;
View::getInstance()->requireAsset('core/app');This ensures all JS dialog handlers are included.
—
### ✅ 5. **(Optional) Dialog Actions via JS**
If you need to handle callbacks after dialog close, you can hook into:
$(document).on('dialogclose', function(e, data) {
console.log('Dialog closed:', data);
});—
Would you like an example with **form submission inside the dialog**, **AJAX loading**, or saving something from the dialog?
default concrete cms
dialog open like below
Delete Locale
Delete this multilingual section? This will remove the entire site tree and its content from your website.
CancelDelete
Here’s how to replicate **that native dialog style** in your **custom Concrete CMS package**.
—
## ✅ Step-by-Step: Open Concrete CMS Native Dialog in Your Package
### ✅ 1. **Add a Link or Button with `data-launch-dialog`**
Concrete CMS uses a **JavaScript-based launcher** for dialogs. You manually trigger them like this:
<a href="<?= URL::to('/path/to/dialog') ?>"
class="btn btn-danger"
data-launch-dialog="delete-my-item"
data-dialog-title="<?= t('Delete Item') ?>"
data-dialog-width="500"
data-dialog-height="300"
data-dialog-modal="true">
Delete Item
</a>> ⚠️ `data-launch-dialog` must have a unique key like `delete-my-item`.
—
### ✅ 2. **Create the Controller Endpoint**
In your controller (e.g. in a dashboard or single page controller):
public function view()
{
// normal view
}
public function delete_dialog()
{
$this->set('itemName', 'Sample Item');
$this->render('/dialogs/delete_item'); // points to dialogs/delete_item.php view
}—
### ✅ 3. **Create the Dialog View File**
Location: `your_package/single_pages/dialogs/delete_item.php`
defined('C5_EXECUTE') or die("Access Denied.");
?>
<div class="ccm-ui">
<form method="post" action="<?= URL::to('/handle/delete/item') ?>">
<?= Core::make('token')->output('delete_item') ?>
<p><?= t("Are you sure you want to delete '%s'?", $itemName) ?></p>
<div class="dialog-buttons">
<button class="btn btn-secondary" data-dialog-action="cancel"><?= t('Cancel') ?></button>
<button class="btn btn-danger float-end" type="submit"><?= t('Delete') ?></button>
</div>
</form>
</div>—
### ✅ 4. **Ensure Assets Are Loaded**
Your view/page should include:
View::getInstance()->requireAsset('core/app'); // Ensures dialogs & jQuery UI are loadedYou can also add it in your controller:
use ConcreteCoreViewView;
public function on_start()
{
View::getInstance()->requireAsset('core/app');
}—
### ✅ 5. **Trigger the Dialog with JavaScript (Optional Manual Trigger)**
If you're not using “, you can do:
ConcreteAjaxDialog.open({
title: 'Delete Item',
href: '<?= URL::to('/path/to/dialog') ?>',
width: 500,
height: 300,
modal: true
});—
### ✅ 6. **Submit Dialog Form**
Use either:
– `data-dialog-action="cancel"` on Cancel button
– Normal `POST` for delete confirmation
—
## ✅ Result
When the button/link is clicked, it will open a native Concrete CMS-style modal dialog with:
– draggable title bar
– resizable frame
– full Concrete UI styling
– cancel and confirm buttons
—
Let me know if you'd like:
– the delete action to be AJAX
– to pass dynamic IDs to the dialog
– to register a route/controller in a custom package automatically
I'll walk you through the full process.