我有一个已经合作了一段时间的项目。运行snnipets后，您可以看到一切都很好。
/* The dark background behind the dialogs */
.dialog-overlay{
display: none;
position: fixed;
top:0;
left:0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
z-index: 10;
}
/* The dialogs themselves */
.dialog-card{
box-sizing: border-box;
width: 570px;
position: absolute;
left: 50%;
margin-left: -285px;
top: 50%;
font: bold 14px sans-serif;
border-radius: 3px;
background-color: #ffffff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.12);
padding: 45px 50px;
}
.dialog-card .dialog-question-sign{
float: left;
width: 68px;
height: 68px;
border-radius: 50%;
color: #ffffff;
text-align: center;
line-height: 68px;
font-size: 40px;
margin-right: 50px;
background-color: #b4d8f3;
}
.dialog-card .dialog-info{
float: left;
max-width: 350px;
}
.dialog-card h5{ /* Dialog title */
color: #383c3e;
font-size: 24px;
margin: 5px 0 30px;
}
.dialog-card p{ /* Dialog text */
color: #595d60;
font-weight: normal;
line-height: 21px;
margin: 30px 0;
}
.dialog-card .dialog-confirm-button,
.dialog-card .dialog-reject-button{
font-weight: inherit;
box-sizing: border-box;
color: #ffffff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
padding: 12px 40px;
border: 0;
cursor: pointer;
outline: 0;
}
.dialog-card .dialog-confirm-button{
background-color: #87bae1;
margin-right: 12px;
}
.dialog-card .dialog-reject-button{
background-color: #e4749e;
}
.dialog-card button:hover{
opacity:0.96;
}
.dialog-card button:active{
position:relative;
bottom:-1px;
}<div id="my-confirm-dialog" class="dialog-overlay">
<div class="dialog-card">
<div class="dialog-question-sign"><i class="fa fa-question"></i></div>
<div class="dialog-info">
<h5>Are you sure?</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra id odio a pellentesque. In dapibus maximus augue, eu dapibus felis laoreet non.</p>
<button class="dialog-confirm-button">Yes</button>
<button class="dialog-reject-button">No</button>
</div>
</div>
</div>
<span class="dialog-show-button" data-show-dialog="my-confirm-dialog">Show Confirm Dialog</span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// This is an example jQuery snippet that makes the dialogs work
$(document).ready(function() {
// We have two control functions that show or hide dialogs
function showDialog(id){
// Find the dialog and show it
var dialog = $('#' + id),
card = dialog.find('.dialog-card');
dialog.fadeIn();
// Center it on screen
card.css({
'margin-top' : -card.outerHeight()/2
});
}
function hideAllDialogs(){
// Hide all visible dialogs
$('.dialog-overlay').fadeOut();
}
// Here is how to use these functions
$('.dialog-confirm-button, .dialog-reject-button').on('click', function () {
// Hide the dialog when the confirm button is pressed
hideAllDialogs();
});
$('.dialog-overlay').on('click', function (e) {
if(e.target == this){
// If the overlay was clicked/touched directly, hide the dialog
hideAllDialogs();
}
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
// When escape is pressed, hide all dialogs
hideAllDialogs();
}
});
// Here, we are listening for clicks on the "show dialog" buttons,
// and showing the correct dialog
$('.dialog-show-button').on('click', function () {
// Take the contents of the "data-show-dialog" attribute
var toShow = $(this).data('show-dialog');
showDialog(toShow);
});
});
</script>除了能够在点击Show Confirm Dialog后显示弹出窗口外，我还希望能够在满足PHP condition时显示弹出窗口。类似：
if(condition){
//Display Popup
}
请帮我解决这个问题
假设php应该与html、js、…在同一个脚本中：
<?php
if(1===1) {
echo "<script>";
echo "showDialog('my-confirm-dialog');";
echo "</script>";
}
?>
这需要存在于html的最后，否则它将失败，因为DOM没有加载，等等。
可以肯定的是，你可以把它放在$(document).ready:里面
<script>
$(document).ready(function() {
// leave the function-definitions and eventlisteners here
//...
// add at the very end:
<?php
if(1===1) {
echo "showDialog('my-confirm-dialog');";
}
?>
});
</script>
另一种解决方案是根据php条件只设置js-var，并在js中检查。
我认为实现这一点最简单的方法就是制作一个脚本标记，在其中调用此函数。
<?php if( condition ): ?>
<script type='text/javascript'>
showDialog(id)
</script>
<?php endif; ?>
如果你想在JavaScript中使用PHP中的一些值，你必须用PHP把它放在页面上的某个地方，然后用JavaScript读取它。脏的内联脚本解决方案是这样的：
<script>
var myValueFromPhp = <?= 'json_encode($anyThing) ?>;
</script>
一个干净的解决方案取决于用例，但可能是类似的：
<div data-coolness="<?='yepp'?>></div>
（或类似的东西，取决于模板引擎）