php 相同的模态不会在两个单独的文件中弹出

我有麻烦打开一个模态在两个单独的PHP文件
这是我的模态代码（workerSurveyModal.php）

<!-- Modal of Renew&Update Survey Decision for Worker -->
<div class="modal fade" id="workerSurveyDecisionModal" tabindex="-1" role="dialog" aria-labelledby="workerSurveyDecisionModalDecisionModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="workerSurveyDecisionModalLabel">Worker Survey Decision:</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="POST" id="formWorkerSurveyResult" action="action/fn_setData.php?mod=renewSurveyResult">
                <div class="modal-body">
                <input type="hidden" id="responseId" name="responseId" >
                <input type="text" id="workerId" name="workerId" >
                <input type="text" id="contractEndDate" name="contractEndDate" >
                    <div class="form-group">
                        <label for="response">Worker Survey Decision:</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="response" id="responseYes" value="YES" required>
                            <label class="form-check-label" for="responseYes">YES</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="response" id="responseNo" value="NO" required>
                            <label class="form-check-label" for="responseNo">NO</label>
                        </div>
                    </div>

                    <div class="form-group" id="reasonDropdownlist" style="display: none;">
                        <label for="reason">Reason for Not Renewing:</label>
                        <select class="form-control" name="reason" id="reason" required>
                            <option selected></option>
                            <option>Personal issue</option>
                            <option>Family issue</option>
                            <option>Other reason</option>
                        </select>
                    </div>

                    <!-- Textbox for "Other reason" -->
                    <div class="form-group" id="otherReasonTextbox" style="display:none;">
                        <label for="otherReason">Please specify Other Reason:</label>
                        <input type="text" class="form-control" name="otherReason" id="otherReason" placeholder="Please specify the reason...">
                    </div>

                    <br>

                    <!-- Dropdownlist for "destination" -->
                    <div class="form-group" id="destinationDropdownlist" style="display: none;">
                        <label for="destination">Selected Destination:</label>
                        <select class="form-control" name="destination" id="destination" required>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="changeDecision">Allow Worker to Change Decision:</label>
                        <select class="form-control" name="changeDecision" id="changeDecision" required>
                            <option selected></option>
                            <option>YES</option>
                            <option>NO</option>
                        </select>
                    </div>

                    <!-- Textbox for Remarks -->
                    <div class="form-group">
                        <label for="remarks">Remarks:</label>
                        <textarea class="form-control" id="remarks" name="remarks" rows="3"></textarea>
                    </div>
                    

                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btnSubmit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- End of Modal of Renew&Update Survey Decision -->

字符串
现在我想在两个单独的php文件中调用Modal
tabSurveyPending.php

<?php
    session_start();

    require ("workerSurveyModal.php");

?>

型
tabCompleted.php

<?php
    session_start();

    require ("workerSurveyModal.php");

?>

型
我只能在一个php文件中调用模态，该文件是tabSurveyPending，在tabSurveyCompleted中，模态不会弹出。
谁能帮帮我，我会很感激你的帮助。谢谢

您面临的问题可能是因为您在两个不同的文件中包含具有相同ID的相同modal。当两个文件都包含在同一页面上时，将有两个具有相同ID的modal，这可能会导致问题。
一种解决方案是在包含tabSurveyPending.php和tabCompleted.php的父文件中只包含一次模态。
如果您需要在两个文件中包含模态，因为它们是单独使用的，您可以考虑根据您在每个文件中设置的变量使模态的ID动态化。
下面是一个示例：
在您的workerSurveyModal.php中：

<div class="modal fade" id="<?php echo $modalId; ?>" tabindex="-1" role="dialog" aria-labelledby="<?php echo $modalId; ?>Label" aria-hidden="true">
    <!-- rest of your modal code -->
</div>

字符串
在您的tabSurveyPending.php中：

<?php
    session_start();
    $modalId = 'workerSurveyDecisionModalPending';
    require ("workerSurveyModal.php");
?>

型
在您的tabCompleted.php中：

<?php
    session_start();
    $modalId = 'workerSurveyDecisionModalCompleted';
    require ("workerSurveyModal.php");
?>

型
这样，每个包含的模态都将有一个唯一的ID。确保更新触发模态的JavaScript代码以使用正确的ID。

php 相同的模态不会在两个单独的文件中弹出

1条答案

相关问题

热门标签

最新问答