I have inserted the following code in Sharepoint and each time I click on the button to open modal, it opens but only for a few moments, then it automatically closes. However, when using this exact same code outside of sharepoint, it works just fine.
Below is the code that I have been using:
<div class="icons">
<div class="icon-boxes">
<div class="icon-boxes-Asset">
<div class="zoom2">
<button class="btn-Asset" id="myBtn-Asset">
<img class="image-icon" src="Asset.jpg" alt=""><p>Asset</p>
</button>
</div>
</div>
</div>
</div>
<!-- This is the MODAL section, this popup section for each icon -->
<!-- This is the Asset Forfeiture MODAL section -->
<div class="Asset-Modal">
<div id="myModal-Asset" class="modal-Asset">
<!-- Modal Design -->
<div class="modal-content-Asset">
<div class="Asset-content">
<img class="image-icon" src="Asset.jpg" alt="">
<div class="Heading-Asset">
<div class="Heading-Asset-Name" alt="">
<h2>Asset Page</h2></div>
<div class="Heading-Asset-Address" alt="">
<h3>Washington State</h3></div>
</div>
<span class="close-Asset">×</span>
</div>
<div class="line"></div>
<div class="Asset-content-info">
<body>Lorem</body>
<br>
<br>
<body>Lorem.</body>
<p>Contact: (A) SOS Phillip (360) 333-3333</p>
<p>Asset Page</p>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal-Asset");
// Get the button that opens the modal
var btn = document.getElementById("myBtn-Asset");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close-Asset")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
<!----------------------------------------->
Related
How to show a popup modal on page load in React js functional component.basically when the page loads the popup or modal should be visible automatically without any click
Most modals will have a prop to specify whether or not the modal should be open. You can simply set this to true on initialization.
Consider an example using a Dialog from the React UI library MUI:
const SimpleDialog = (props) =>
{
const [open, setOpen] = useState(true)
return (
<Dialog open = {open}>
<DialogTitle>Title</DialogTitle>
<DialogContent>...</DialogContent>
</Dialog>
)
}
The open prop of the Dialog is based on the value of the state variable, which is initialized as true. You can change this value as needed through various Dialog actions. To learn more about MUI Dialogs, see the docs.
For information on useState, see the React docs.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modalState: true
};
this.handleShow = this.handleShow.bind(this);
}
handleShow() {
this.setState({ modalState: !this.state.modalState });
}
render() {
return (
<div>
<div className={"modal fade" + (this.state.modalState ? " show d-block" : " d-none")} tabIndex="-1" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">My Profile</h5>
<button type="button" className="close" onClick={this.handleShow}>
<span>×</span>
</button>
</div>
<div className="modal-body">...</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" onClick={this.handleShow}>Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(, document.getElementById('root'));
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
I am showing some dynamic value on a table. in the table each row have a delete button( Suppose Button A ). If click the delete button ( Button A ) open a modal to confirm delete and there have confirm button( Button B ). From confirm button I am calling the api to delete the entity with the entity id.
Now I have the id on Button A and I am sending the request from button B. How can I sent the id from Button A to Button B.
Button A:
<td>
<button data-toggle="modal" value = {{this.id}} data-target="#myModal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
Modal With button B:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Delete</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-header">
Are you sure you want to delete the entry?
</div>
<div class="modal-footer">
yes
</div>
</div>
</div>
</div>
I have given the {{this.id}} on the url of button B but it is always deleting the top or last element ?
add a class (example .delete) to the button,
<button data-toggle="modal" value ={{this.id}} class="delete" data-target="#myModal">
<i class="fa fa-trash-o" aria-hidden="true">delete</i>
</button>
then add a class to the confirmation link (example .yes):
yes
then get onclick event on the button and get the value of the button and insert it in the href attribut :
$(document).on("click", ".delete", function () {
var value = $(this).val();
console.log("value : ", $(this).val())
$(".modal-dialog .yes").attr("href","/admin/dashbord/category/"+value+"/delete");
});
see this codepen
I have a problem with the input text on onsen alert dialog
when I click OK button dialog not hide
how to get password value from dialog input tag
<ons-button modifier="tappable" onclick="
ons.createAlertDialog('alert.html').then(function(alertDialog) {
alertDialog.show();
});
"
>Test2</ons-button>
<script type="text/ons-template" id="alert.html">
<ons-alert-dialog animation="default" cancelable>
<div class="alert-dialog-title">Warning!</div>
<div class="alert-dialog-content">
<input id="password" ng-model="password" class="text-input " type="number"
pattern="[0-9]*" inputmode="numeric" placeholder="password" value="" autofocus>
</div>
<div class="alert-dialog-footer">
<button class="alert-dialog-button" onclick="alertDialog.hide()">OK</button>
</div>
</ons-alert-dialog>
</script>
You will need to add your data to a global variable or push it to the factory as it appears you are using Angular.
Also, you need to register your dialogue to a controller / variable as well so you can close it. The demo on the tutorial site is for vanilla right now, but the concept is the same.
Here is how this works: http://tutorial.onsen.io/?framework=vanilla&category=Reference&module=dialog
JS:
var showDialog = function(id) {
document
.getElementById(id)
.show();
};
var hideDialog = function(id) {
document
.getElementById(id)
.hide();
};
var fromTemplate = function() {
var dialog = document.getElementById('dialog-3');
if (dialog) {
dialog.show();
}
else {
ons.createDialog('dialog.html')
.then(function(dialog) {
dialog.show();
});
}
};
Markup:
<ons-page>
<ons-toolbar>
<div class="center">Dialogs</div>
</ons-toolbar>
<ons-list>
<ons-list-header>Showing dialogs</ons-list-header>
<ons-list-item tappable onclick="showDialog('dialog-1')">Simple dialog</ons-list-item>
<ons-list-item tappable onclick="showDialog('dialog-2')">Alert dialog</ons-list-item>
<ons-list-item tappable onclick="fromTemplate()">From template</ons-list-item>
<ons-list-header>Notifications</ons-list-header>
<ons-list-item tappable onclick="ons.notification.alert('Hello, world')">Alert</ons-list-item>
<ons-list-item tappable onclick="ons.notification.confirm({message: 'Are you ready?'})">Confirmation</ons-list-item>
<ons-list-item tappable onclick="ons.notification.prompt({message: 'What is your name?'})">Prompt</ons-list-item>
</ons-list>
</ons-page>
<ons-dialog id="dialog-1">
<div style="text-align: center; padding: 10px;">
<p>
This is a dialog.
<p>
<p>
<ons-button onclick="hideDialog('dialog-1')">Close</ons-button>
</p>
</div>
</ons-dialog>
<ons-alert-dialog id="dialog-2">
<div class="alert-dialog-title">Warning!</div>
<div class="alert-dialog-content">
An error has occurred!
</div>
<div class="alert-dialog-footer">
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')">Cancel</button>
<button class="alert-dialog-button" onclick="hideDialog('dialog-2')">OK</button>
</div>
</ons-alert-dialog>
<ons-template id="dialog.html">
<ons-dialog id="dialog-3">
<div style="text-align: center; padding: 10px;">
<p>
This dialog was created from a template.
<p>
<p>
<ons-button onclick="hideDialog('dialog-3')">Close</ons-button>
</p>
</div>
</ons-dialog>
</ons-template>
<template name="menu">
<div class="ui grid">
<div class="two wide column"></div>
<div class="twelve wide column">
<div class="ui red menu">
<a class="{{active}} item" id="home">
<i class="home icon"></i> Péng you
</a>
<a class="item" id="message">
<i class="mail icon"></i> Message
</a>
<a class="item" id="friend">
<i class="user icon"></i> Find Friend
</a>
<div class="right red menu">
<a class="active item">
<i class="sign in icon"></i> Log In
</a>
</div>
</div>
</div>
<div class="two wide column"></div>
</div>
Template.menu.helpers({
'active': function (e, tmpt) {
var active = Session.get('activeMake');
return active
}
});
Template.menu.events({
'click #home': function (e, tmpt) {
event.preventDefault();
var activeAttribute = "active";
Session.set('activeMake', activeAttribute);
}
});
now, I can give active. but, I can't delete active when user cluck other menu.
and i think there is much better way to do this. (ex: without session or ID attribute)
please help me....
its an old question, iam having same trouble, this works but is not the perfect way. In my case i got like 5 elements so it work fast, but in other app i got like 300 buttons and works a litle slow in cordova app, specially olds tablets.
Template.yourtTemplateName.events({
'click .commonClass': function (e, t) {
$(".commonClass").each(function () {
console.log(this);
$(this).removeClass('active')
});
$(e.target).addClass('active')
},
});
I am novice in JQuery UI. I am trying code for opening jquery dialog with image and text from existing code in one of div tags. My code is
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function(){
$(".peter_pic").click(function(){
$( ".peter" ).dialog( "open" );
});
$( ".peter" ).dialog({ autoOpen: false });
});
$( window ).load(function() {
$(".peter").hide();
});
</script>
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>
I figured out on my own about the solution.
I added multiple img tag. This solved the problem.
<div class="Table" style="display: table;" >
<div style="display: table-row;">
<div style="display: table-cell;" class = "test">
<img class = "peter_pic" src="someimage.jpg" />
<div data-role="popup" class="peter">
<img class = "peter_pic" src="someimage.jpg" />
Display some text. Display some text. Display some text.
</div>
</div>
</div>
</div>